@for direktīva SASS

Ar @for direktīvas palīdzību var izvadīt noteiktus stilus daudzumā, ko norāda skaitītāja mainīgais. Pirmais ieraksta variants @for izskatās šādi:

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

Šajā gadījumā diapazonā stingri tiek iekļautas vērtības (begin) un (end). Vērts pievērst uzmanību tam, ka (begin) un (end) - ir jāatgriež veselus skaitļus, jo tie nosaka skaitīšanas virzienu, t.i., ja (begin) ir mazāks par (end), skaitītājs pieaugs un attiecīgi, ja otrādi - samazināsies.

Apskatīsim @for direktīvas darbību pirmajā sintakses variantā ar šādu piemēru:

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

Kompilācijas rezultāts:

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

Otrajā variantā ieraksts izskatās šādi:

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

Šajā gadījumā (end) vērtība tiek izmesta.

Paņemsim iepriekšējo piemēru un ierakstīsim to otrajā variantā:

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

Tagad pievērsiet uzmanību iegūtajam kodam:

.li-1 {
	width: 1px; 
}

.li-2 {
	width: 2px; 
}

.li-3 {
	width: 3px; 
}

.li-4 {
	width: 4px; 
}

Pastāstiet, kāds būs kompilācijas rezultāts šim kodam:

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

Pastāstiet, kāds būs kompilācijas rezultāts šim kodam:

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