CSS: creare classi incrementali con il loop while in SASS

  • CSS
  • Gabriele Romanato

In SASS il loop while è un costrutto che si rivela utile per creare classi con stili incrementali.

Se vogliamo ad esempio creare delle classi che aumentino in modo incrementale il valore della proprietà margin-top, possiamo scrivere:


$margin-base-size: 10;

@while $margin-base-size <= 80 {
  .margin-top-#{$margin-base-size} {
        margin-top: ($margin-base-size * 1px);
   }
   $margin-base-size: $margin-base-size * 2;
}

Compilando avremo:


.margin-top-10 {
    margin-top: 10px;
}
.margin-top-20 {
    margin-top: 20px;
}
.margin-top-40 {
    margin-top: 40px;
}
.margin-top-80 {
    margin-top: 80px;
}

Come nei normali loop dei linguaggi di programmazione, il loop termina quando la condizione booleana iniziale viene valutata come false.

Torna su