Direktíva @for v SASS

Pomocou direktívy @for je možné vypísať určité štýly v množstve určenom premennou-čítadlom. Prvá možnosť zápisu @for vyzerá takto:

scss@for $var from (begin) through (end)

V tomto prípade sú do rozsahu striktne zahrnuté hodnoty (begin) a (end). Treba si dať pozor na to, že (begin) a (end) - musia vracať celé čísla, pretože určujú smer počítania, t.j. ak je (begin) menšie ako (end), čítadlo bude rásť a naopak, ak je väčšie - klesať.

Fungovanie direktívy @for v prvej syntaxi si rozoberieme na nasledujúcom príklade:

styles.scss@for $count from 1 through 5 {
  .li-#{$count} {
    width: $count + px;
  }
}

Výsledok kompilácie:

styles.css.li-1 {
  width: 1px; 
}
.li-2 {
  width: 2px; 
}
.li-3 {
  width: 3px; 
}
.li-4 {
  width: 4px; 
}
.li-5 {
  width: 5px; 
}

Druhá možnosť zápisu vyzerá nasledovne:

scss@for $var from (begin) to (end)

V tomto prípade je hodnota (end) vynechaná.

Zoberme predchádzajúci príklad a zapíšme ho v druhej syntaxi:

styles.scss@for $count from 1 to 5 {
  .li-#{$count} {
    width: $count + px;
  }
}

Teraz si všimnite výsledný kód:

styles.css.li-1 {
  width: 1px; 
}

.li-2 {
  width: 2px; 
}

.li-3 {
  width: 3px; 
}

.li-4 {
  width: 4px; 
}

styles.scss@for $var from 5 through 1 {
  li-#{$var} {
    padding: 10 * $var + px;
  }
}

styles.scss@for $var from 1 to 3 {
  .navbar-link-#{$var} {
    color: blue;
    width: 10px * $var;
  }
}