@for-direktivet i SASS

Med direktivet @for kan man generera specifika stilar i en mängd som anges av en räknarvariabel. Det första skrivsättet för @for ser ut så här:

@for $var from (start) through (slut)

I detta fall inkluderas värdena (start) och (slut) strikt i intervallet. Det är värt att uppmärksamma att (start) och (slut) måste returnera heltal, eftersom de anger räkneriktningen, dvs. om (start) är mindre än (slut), kommer räknaren att öka och omvänt, om det är tvärtom - minska.

Låt oss överväga hur direktivet @for fungerar i den första syntaxvarianten med följande exempel:

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

Resultat av kompilering:

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

I det andra skrivsättet ser notationen ut på följande sätt:

@for $var from (start) to (slut)

Där värdet (slut) utesluts.

Låt oss ta föregående exempel och skriva det i det andra skrivsättet:

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

Var nu uppmärksam på den resulterande koden:

.li-1 {
	width: 1px; 
}

.li-2 {
	width: 2px; 
}

.li-3 {
	width: 3px; 
}

.li-4 {
	width: 4px; 
}

Berätta vad som blir resultatet av kompilering för följande kod:

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

Berätta vad som blir resultatet av kompilering för följande kod:

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