[HTML|JS|CSS] Sass : Pętle

Sass oferuje kilka rodzajów pętli, które znamy z innych języków programowania.Poza instrukcją @each stosowaną w przypadku list, mamy do dyspozycji pętle @for oraz @while, podobne do tych, które każdy zna chociażby z języka C.

Składnia tych instrukcji przedstawia się następująca:

$i: 0;
@while $i < 5 {
  .indexed-class#{$i} { margin-right: 15 * $i; }
  $i: $i + 1;
}

@for $j from 5 through 8
{
 .indexed-class#{$j} { margin-right: 15 * $j; }
}

Po transformacji otrzymamy:

.indexed-class0 {
  margin-right: 0; }

.indexed-class1 {
  margin-right: 15; }

.indexed-class2 {
  margin-right: 30; }

.indexed-class3 {
  margin-right: 45; }

.indexed-class4 {
  margin-right: 60; }

.indexed-class5 {
  margin-right: 75; }

.indexed-class6 {
  margin-right: 90; }

.indexed-class7 {
  margin-right: 105; }

.indexed-class8 {
  margin-right: 120; }