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/TheWebSchool
See you soon!
Enzo.
Top comments (23)
There's no loop in CSS. The title should be fixed to speak about SCSS.
Come on, SASS is a CSS preprocessor that compiles into CSS, it's not like I'm talking about PHP. 😄
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.
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.
Nobody is searching looping in SASS, though. I found this article by searching CSS loops, so...
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.
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.
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.
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.
Title is totally misleading, you're writing click bait, not useful articles. Please fix the title and stop misleading people
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.
That's awesome 🤩
I believe it ** would have been ** better if OP mentioned it was SCSS, but it is also not clickbait. Anyway nice article
Guys, read carefully description :) :
Learn how to use a loop in CSS with the help of the SASS preprocessor in less than a minute!
Read carefully the title.
You seek for "how to swim in 1 day" and the article says "buy a boat"... Don' t be fooled.
Even though people say the title is misleading it helped me in knowing some new things.
Thank you author
Nice!
Whattt!!!!! That's a loop!!!
Now, we can say that html is a programming language.
😜😜😜