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:

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

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

Výsledok kompilácie:

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

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

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

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

.li-1 {
	width: 1px; 
}

.li-2 {
	width: 2px; 
}

.li-3 {
	width: 3px; 
}

.li-4 {
	width: 4px; 
}

Popíšte, aký bude výsledok kompilácie nasledujúceho kódu:

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

Popíšte, aký bude výsledok kompilácie nasledujúceho kódu:

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