How to Write Loops with Preprocessors

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