SASSтеги @for директивасы

@for директивасынын жардамы менен эсептегич өзгөрмөсү менен көрсөтүлгөн сандагы белгилүү стилдерди чыгара аласыз. @for жазмасынын биринчи варианты төмөнкүдөй көрүнөт:

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

Бул учурда диапазонго (begin) жана (end) маанилери катуу киргизилет. (begin) жана (end) бүтүн сандарды кайтарышы керек экендигине көңүл буруу керек, анткени алар эсептөө багытын белгилейт, башкача айтканда, эгерде (begin) (end) дан кичине болсо, эсептегич өсөт жана тиешелүүлүгүнө жараша, тескерисинче болсо - азаят.

@for директивасынын иштешин синтаксистин биринчи вариантында төмөнкү мисалда карап көрөлү:

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

Компиляциянын натыйжасы:

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

Экинчи вариантындагы жазма төмөнкүдөй көрүнөт:

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

Бул жерде (end) мааниси ташкыланат.

Мурунку мисалды алып, аны экинчи вариантында жазалы:

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

Эми чыккан кодко көңүл буруңуз:

.li-1 {
	width: 1px; 
}

.li-2 {
	width: 2px; 
}

.li-3 {
	width: 3px; 
}

.li-4 {
	width: 4px; 
}

Төмөнкү коддун компиляция натыйжасы кандай болорун айтып бериңиз:

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

Төмөнкү коддун компиляция натыйжасы кандай болорун айтып бериңиз:

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