DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

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

Posted on • Updated 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/TheWebSchool

See you soon!

Enzo.

Top comments (24)

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

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.

Thread Thread
 
mshaynerush profile image
Shayne Rushton

Nobody is searching looping in SASS, though. I found this article by searching CSS loops, so...

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
 
tushar0107 profile image
tushar0107

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

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
 
kamlekar profile image
Mr_Green

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

12 Gorgeous UI Components for Your Design Inspiration

>> Check out this classic DEV post <<