SASSda @for direktivasi

@for direktivasi yordamida hisoblagich o‘zgaruvchisi bilan ko‘rsatilgan miqdorda ma’lum stillarni chiqarish mumkin. @for ning birinchi yozish varianti quyidagicha:

@for $var from (boshlanish) through (tugash)

Bunda diapazonga (boshlanish) va (tugash) qiymatlari qat’iy kiritiladi. Shuni esda tutish kerakki, (boshlanish) va (tugash) butun sonlarni qaytarishi kerak, chunki ular hisoblash yo‘nalishini belgilaydi, ya’ni agar (boshlanish) (tugash) dan kichik bo‘lsa, hisoblagich o‘sadi va aksincha bo‘lsa - kamayadi.

@for direktivasining ishlashini birinchi sintaksis variantida quyidagi misolda ko‘rib chiqamiz:

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

Kompilyatsiya natijasi:

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

Ikkinchi varianta yozish quyidagicha ko‘rinishga ega:

@for $var from (boshlanish) to (tugash)

Bunda (tugash) qiymati hisobga olinmaydi.

Oldingi misolni olaylik va uni ikkinchi varianta yozamiz:

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

Endi hosil bo‘lgan kodga e’tibor bering:

.li-1 {
	width: 1px; 
}

.li-2 {
	width: 2px; 
}

.li-3 {
	width: 3px; 
}

.li-4 {
	width: 4px; 
}

Quyidagi kodning kompilyatsiya natijasi qanday bo‘lishini tushuntiring:

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

Quyidagi kodning kompilyatsiya natijasi qanday bo‘lishini tushuntiring:

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