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 {
    .t#{$i}{
    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: https://www.youtube.com/c/Learntocreate/videos

See you soon!

Enzo.

Discussion (23)

Collapse
mtrantalainen profile image
Mikko Rantalainen

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

Collapse
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. 😄

Collapse
technikhil314 profile image
technikhil314

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.

Collapse
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.

Collapse
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.

Collapse
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.

Collapse
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.

Collapse
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.

Collapse
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

Collapse
lamsdev profile image
Albert

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.

Collapse
olivierish profile image
Olivier I.

That's awesome 🤩

Collapse
kibranoz profile image
Kibranoz

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

Collapse
mercuryrising22 profile image
MercuryRising22

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

Collapse
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.

Collapse
amithk5 profile image
AMITHK5

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

Collapse
nkuwakwe profile image
Nelson Uwakwe

Nice!

Collapse
ahmadfajri7 profile image
fx7

click bait tech version

Collapse
alireza4130 profile image
Alireza

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

Collapse
elias89 profile image
Elias

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

Collapse
essayscambjohn profile image
John Miller

CSS is so easy

Collapse
tushar0107 profile image
tushar0107

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

Collapse
kamlekar profile image
Mr_Green

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