De @for-directive in SASS

Met de directive @for kun je bepaalde stijlen weergeven in een hoeveelheid, gespecificeerd door een tellervariabele. De eerste schrijfwijze van @for ziet er als volgt uit:

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

In dit geval worden de waarden (begin) en (einde) strikt meegenomen in het bereik. Het is belangrijk op te merken dat (begin) en (einde) gehele getallen moeten retourneren, aangezien ze de richting van de telling bepalen, d.w.z. als (begin) kleiner is dan (einde), zal de teller toenemen en respectievelijk, als het omgekeerde waar is - afnemen.

Laten we de werking van de directive @for in de eerste syntaxisvariant bekijken aan de hand van het volgende voorbeeld:

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

Compilatieresultaat:

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

In de tweede variant ziet de schrijfwijze er als volgt uit:

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

Hierbij wordt de waarde (einde) weggelaten.

Laten we het vorige voorbeeld nemen en het in de tweede variant schrijven:

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

Let nu op de resulterende code:

.li-1 {
	width: 1px; 
}

.li-2 {
	width: 2px; 
}

.li-3 {
	width: 3px; 
}

.li-4 {
	width: 4px; 
}

Vertel wat het compilatieresultaat zal zijn van de volgende code:

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

Vertel wat het compilatieresultaat zal zijn van de volgende code:

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