How to Use a Loop in CSS!

 1. The HTML structure.

Start by installing the live sass compiler extension in VS Code, or download it globally via npm to use its script.

Then create a hundred paragraphs by using an Emmet shortcut:

p.t${Hello World}*100

2. Create a SCSS file.

Create a SCSS file and copy and paste the following code:

@for $i from 1 through 100 {

    .t#{$i}{

    font-size: $i * 1px;

    }

}

Then press F1 and look for Live Sass: Watch Sass if you are using the live sass compiler extension.

Click on it and it'll create a style.css file with all of the different font-sizes, growing one by one, for each paragraph.

Check out your app and you'll see that each paragraph will grow from a small font to a bigger font steadily!