How to Use a Loop in CSS!

#html #css #tutorial

Hey fellow creators,

Learn how to use a loop in CSS with the help of the SASS preprocessor in less than a minute!

If you prefer to watch the video version, it's right here :

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!

Come and take a look at my Youtube channel: https://www.youtube.com/c/Learntocreate/videos

See you soon!

Enzo.

Discussion (19)

Mikko Rantalainen • Dec 5

There's no loop in CSS. The title should be fixed to speak about SCSS.

Ustariz Enzo • Dec 5

Come on, SASS is a CSS preprocessor that compiles into CSS, it's not like I'm talking about PHP. 😄

technikhil314 • Dec 5

Take a look at final generated css. It doesn't have loop. Please correct the title and stop spreading wrong information. People take away the things and share it further. Be a responsible developer not for yourself but for the whole community and for beginners who will learn from you.

Igwe Kalu • Dec 5

Your tutorial is useful for anyone learning SASS. But the title is seriously misleading.

No, you can’t write a loop in CSS. And frankly, the idea seems pointless. It’s a challenge to find applicability for a case where such logic is best implemented as a STYLE, rather than in application logic.

Otherwise, this was a nice tutorial really that can support knowledge of SASS.

Álvaro Alcibi Baquero • Dec 5

Indeed it is a pre processor. I mean, same concept..but with the fundamentals differences within a markup and an already declarative programming languaje like CSS..

I guess we need to acurate our Css definition like a little relative of the programming languages family tree..but define it with great detail.

Mike Harrison • Dec 6

The question is simple - what language are you writing the loop in? Sass or scss. Not css. The title sounds like there was a new feature in css that allows loops.

Edson Jr. • Dec 5

Totally a clickbait.
Since we all as frontend devs know SASS/SCSS or any other CSS preprocessor capabilities you definetely should change the article's title.

Josiah Bryan • Dec 5

Title is totally misleading, you're writing click bait, not useful articles. Please fix the title and stop misleading people

Albert • Dec 5

Totally Clickbat content to promote the YouTube a Channel at the end...the information posted need some fix... This post should be deleted if the autor is not going to apply the proper corrections.