DEV Community

Cover image for How to Use a Loop in CSS!
Ustariz Enzo
Ustariz Enzo

Posted on

How to Use a Loop in CSS!

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
Enter fullscreen mode Exit fullscreen mode

2. Create a SCSS file.

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

@for $i from 1 through 100 {
    font-size: $i * 1px;
Enter fullscreen mode Exit fullscreen mode

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:

See you soon!


Discussion (23)

mtrantalainen profile image
Mikko Rantalainen

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

ziratsu profile image
Ustariz Enzo Author

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

technikhil314 profile image

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_3d942133688cb58 profile image
Igwe Kalu

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.

alcibi1 profile image
Álvaro Alcibi Baquero

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.

mikkorantalainen profile image
Mikko Rantalainen

The only reason I viewed this article was because it claimed to do a loop in CSS. Had it said loop in SCSS I wouldn't have bothered to view it because I already know that it can be done.

Clickbait is clickbait.

mycarrysun profile image
Mike Harrison

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.

ed1nh0 profile image
Edson Jr.

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.

josiahbryan profile image
Josiah Bryan

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

lamsdev profile image

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.

olivierish profile image
Olivier I.

That's awesome 🤩

kibranoz profile image

I believe it ** would have been ** better if OP mentioned it was SCSS, but it is also not clickbait. Anyway nice article

mercuryrising22 profile image

Guys, read carefully description :) :
Learn how to use a loop in CSS with the help of the SASS preprocessor in less than a minute!

ed1nh0 profile image
Edson Jr.

Read carefully the title.
You seek for "how to swim in 1 day" and the article says "buy a boat"... Don' t be fooled.

amithk5 profile image

Even though people say the title is misleading it helped me in knowing some new things.
Thank you author

nkuwakwe profile image
Nelson Uwakwe


ahmadfajri7 profile image

click bait tech version

alireza4130 profile image

Why we must use loop in CSS? What is the usage?
in javascript, backend languages are important but in CSS without usage

elias89 profile image

It's not a loop and it's not css.

essayscambjohn profile image
John Miller

CSS is so easy

tushar0107 profile image

Whattt!!!!! That's a loop!!!
Now, we can say that html is a programming language.

kamlekar profile image

This is a good article but title is misleading. Request the author to change it.