Директива @for в SASS

Mit der Direktive @for können bestimmte Stile in einer durch eine Zählervariable angegebenen Menge ausgegeben werden. Die erste Schreibweise von @for sieht so aus:

@for $var from (Anfang) through (Ende)

In diesem Fall sind die Werte (Anfang) und (Ende) strikt im Bereich enthalten. Es ist zu beachten, dass (Anfang) und (Ende) ganze Zahlen zurückgeben müssen, da sie die Zählrichtung vorgeben, d.h. wenn (Anfang) kleiner als (Ende) ist, wird der Zähler wachsen und entsprechend, wenn umgekehrt - abnehmen.

Betrachten wir die Funktionsweise der Direktive @for in der ersten Syntaxvariante anhand des folgenden Beispiels:

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

Kompilierungsergebnis:

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

In der zweiten Variante sieht die Schreibweise wie folgt aus:

@for $var from (Anfang) to (Ende)

Dabei wird der Wert (Ende) ausgeschlossen.

Nehmen wir das vorherige Beispiel und schreiben es in der zweiten Variante:

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

Achten Sie nun auf den resultierenden Code:

.li-1 {
	width: 1px; 
}

.li-2 {
	width: 2px; 
}

.li-3 {
	width: 3px; 
}

.li-4 {
	width: 4px; 
}

Erklären Sie, wie das Kompilierungsergebnis des folgenden Codes aussehen wird:

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

Erklären Sie, wie das Kompilierungsergebnis des folgenden Codes aussehen wird:

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