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

@for директивасының көмегімен санауыш айнымалысымен көрсетілген санында нақты стильдерді шығаруға болады. @for жазбасының бірінші нұсқası келесідей:

@for $var from (басталуы) through (аяқталуы)

Бұл жағдайда диапазонға (басталуы) және (аяқталуы) мәндері қатаң қосылады. (басталуы) және (аяқталуы) бүтін сандарды қайтаруы керек, өйткені олар санау бағытын белгілейді, яғни егер (басталуы) (аяқталуы)нан кіші болса, санауыш өседі және сәйкесінше, керісінше болса - кемиді.

@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 (басталуы) to (аяқталуы)

Бұл жағдайда (аяқталуы) мәні алынып тасталады.

Алдыңғы мысалды алып, оны екінші нұсқада жазайық:

@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;
	}
}