Die @for-richtlijn in SASS

Met die @for-richtlijn kan ons spesifieke style herhaal 'n aantal kere soos gespesifiseer deur 'n tellervariaabel. Die eerste skryfwyse vir @for lyk soos volg:

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

In hierdie geval is die waardes (begin) en (end) ingesluit in die reeks. Dit is belangrik om te let daarop dat (begin) en (end) heelgetalle moet teruggee, aangesien hulle die rigting van die telling bepaal, d.w.s. as (begin) kleiner is as (end), sal die telling toeneem en omgekeerd - sal dit afneem.

Kom ons kyk na die werking van die @for-richtlijn in die eerste sintaksisvorm met die volgende voorbeeld:

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

Die kompilasieresultaat:

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

Die tweede skryfwyse lyk soos volg:

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

In hierdie geval word die waarde (end) uitgesluit.

Kom ons neem die vorige voorbeeld en skryf dit in die tweede vorm:

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

Let nou op die gevolglike kode:

.li-1 {
	width: 1px; 
}

.li-2 {
	width: 2px; 
}

.li-3 {
	width: 3px; 
}

.li-4 {
	width: 4px; 
}

Verduidelik wat die resultaat van die kompilasie van die volgende kode sal wees:

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

Verduidelik wat die resultaat van die kompilasie van die volgende kode sal wees:

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