How to Write Loops with Preprocessors

Publikováno: 5.11.2020

Loops are one of those features that you don’t need every day. But when you do, it’s awfully nice that preprocessors can do it because native HTML and CSS cannot.

Sass (SCSS)

for Loop

CodePen Embed Fallback

while Loop

CodePen Embed Fallback

each Loop

CodePen Embed Fallback

Less

for Loop

CodePen Embed Fallback

while Loop

(That’s what the above is. The when clause could be thought of exactly as while.)

each Loop

CodePen Embed Fallback

Stylus

for Loop

CodePen… Read article “How to Write Loops with Preprocessors”


The post How to Write Loops with Preprocessors appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Celý článek

Loops are one of those features that you don’t need every day. But when you do, it’s awfully nice that preprocessors can do it because native HTML and CSS cannot.

Sass (SCSS)

for Loop

while Loop

each Loop

Less

for Loop

while Loop

(That’s what the above is. The when clause could be thought of exactly as while.)

each Loop

Stylus

for Loop

while Loop

Only for loops in Stylus.

each Loop

The for loop actually behaves more like an each loop, so here’s a more obvious each loop example:

Pug

for Loop

while Loop

each Loop

Haml

for Loop

while Loop

each Loop

Slim

for Loop

while Loop

each Loop


The post How to Write Loops with Preprocessors appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Nahoru
Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tímto souhlasíte. Další informace