Direktiva @for v SASS

S pomočjo direktive @for lahko izpišemo določene stile v količini, ki jo določa števec-spremenljivka. Prva različica zapisa @for izgleda takole:

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

V tem primeru so v obseg strogo vključene vrednosti (begin) in (end). Omeniti velja, da morata (begin) in (end) vrniti celi števili, saj določata smer štetja, tj. če je (begin) manjši od (end), bo števec naraščal in, če je obratno - padal.

Oglejmo si delovanje direktive @for v prvi različici sintakse z naslednjim primerom:

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

Rezultat prevajanja:

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

Drugi variant zapisa izgleda takole:

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

Pri tem pa se vrednost (end) izključi.

Vzemimo prejšnji primer in ga zapišimo v drugi različici:

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

Zdaj pa pozornost posvetite nastali kodi:

.li-1 {
	width: 1px; 
}

.li-2 {
	width: 2px; 
}

.li-3 {
	width: 3px; 
}

.li-4 {
	width: 4px; 
}

Povejte, kakšen bo rezultat prevajanja naslednje kode:

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

Povejte, kakšen bo rezultat prevajanja naslednje kode:

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