@for loops - google/closure-stylesheets GitHub Wiki

Loops in Closure Stylesheets

Detailed Design


Loops will be defined with the new @-rule โ€œ@forโ€. The syntax will conceptually be as follows:

for_loop : โ€œ@forโ€ <DOLLAR> IDENTIFIER โ€œfromโ€ (IDENTIFIER | NUMBER) โ€œtoโ€ (IDENTIFIER | NUMBER) [ โ€œstepโ€ (IDENTIFIER | NUMBER) ] ruleblock;

ruleblock : โ€˜{โ€˜ S\* block โ€˜}โ€™ | โ€˜;โ€™


Loops will be evaluated by unrolling the loop and replacing the loop variable with the iteration number.

For example:

@for $i from 0 to 4 step 2 {
  @def A add(2px, $i);

  .w-$i {
    margin: A;
    padding: mult(1px, $i);

Will be expanded to:

@def A_0 add(2px, 0);   // A suffix is automatically added to @defs.

.w-0 {
  margin: A_0;
  padding: mult(1px, 0);

@def A_2 add(2px, 2); 

.w-2 {
  margin: A_2;
  padding: mult(1px, 2);

@def A_4 add(2px, 4); 

.w-4 {
  margin: A_4;
  padding: mult(1px, 4);

Note the special treatment of @defs. The current iteration number is automatically added to it so the definition is redefined per context.


Compile time constants will be introduced so they can be used as argument to for loops. They will passed by a command line flag, similar to boolean constants in conditionals.

This will allow defining:

@for $i from START to END {

Where a command line flag should be passed to compiler defining START and END.

โš ๏ธ **GitHub.com Fallback** โš ๏ธ