@for direktiiv SASS-is

Kasutades direktiivi @for saab väljastada kindlaid stiile muutujaga määratud koguses. Esimene kirjutusviis @for näeb välja selline:

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

Sellisel juhul kaasatakse vahemikku rangelt väärtused (begin) ja (end). Tähelepanu tuleks pöörata sellele, et (begin) ja (end) peavad tagastama täisarvud, kuna need määravad loendamise suuna, st. kui (begin) on väiksem kui (end), siis loendur kasvab ja vastupidi - kui (begin) on suurem, siis kahaneb.

Vaatleme direktiivi @for tööd esimeses süntaksi variandis järgneval näitel:

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

Kompileerimise tulemus:

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

Teine kirjutusviis näeb välja järgmine:

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

Sel juhul väärtust (end) ei kaasata.

Võtame eelmise näite ja kirjutame selle teise variandina:

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

Nüüd pöörake tähelepanu saadud koodile:

.li-1 {
	width: 1px; 
}

.li-2 {
	width: 2px; 
}

.li-3 {
	width: 3px; 
}

.li-4 {
	width: 4px; 
}

Kirjelda, milline on järgmise koodi kompileerimise tulemus:

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

Kirjelda, milline on järgmise koodi kompileerimise tulemus:

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