A @for direktíva a SASS-ban

A @for direktíva segítségével meghatározott stílusokat adhatunk ki egy számlálóváltozó által megadott mennyiségben. A @for első írásmódja a következő:

@for $var from (kezdet) through (vég)

Ebben az esetben a tartományba szigorúan beletartozik a (kezdet) és a (vég) értéke. Érdemes megjegyezni, hogy a (kezdet) és a (vég) egész számokat kell, hogy adjon vissza, mivel ezek határozzák meg a számlálás irányát, azaz ha a (kezdet) kisebb, mint a (vég), a számláló növekedni fog, és fordítva, ha a (kezdet) nagyobb, mint a (vég) - csökkenni fog.

Nézzük meg a @for direktíva működését az első szintaxisban a következő példán:

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

A fordítás eredménye:

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

A második írásmód a következő:

@for $var from (kezdet) to (vég)

Itt a (vég) értéke nem kerül bele a tartományba.

Vegyük az előző példát, és írjuk fel a második írásmóddal:

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

Most figyeljük meg a kapott kódot:

.li-1 {
	width: 1px; 
}

.li-2 {
	width: 2px; 
}

.li-3 {
	width: 3px; 
}

.li-4 {
	width: 4px; 
}

Mondd el, mi lesz a következő kód fordításának eredménye:

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

Mondd el, mi lesz a következő kód fordításának eredménye:

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