Arahan @for dalam SASS

Dengan menggunakan arahan @for, style tertentu boleh dihasilkan sebanyak yang dinyatakan oleh pembilang-berubah. Bentuk penulisan pertama @for kelihatan seperti ini:

@for $var from (permulaan) through (penghujung)

Dalam kes ini, julat secara ketat termasuk nilai (permulaan) dan (penghujung). Perlu diberi perhatian bahawa (permulaan) dan (penghujung) mesti mengembalikan nombor bulat, kerana ia menentukan arah kiraan, iaitu jika (permulaan) kurang daripada (penghujung), pembilang akan meningkat dan sebaliknya, jika sebaliknya - menurun.

Mari kita lihat cara arahan @for berfungsi dalam bentuk sintaks pertama pada contoh berikut:

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

Hasil kompilasi:

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

Dalam bentuk kedua, penulisan kelihatan seperti berikut:

@for $var from (permulaan) to (penghujung)

Di sini nilai (penghujung) disingkirkan.

Mari ambil contoh sebelumnya dan tulisnya dalam bentuk kedua:

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

Sekarang perhatikan kod yang terhasil:

.li-1 {
	width: 1px; 
}

.li-2 {
	width: 2px; 
}

.li-3 {
	width: 3px; 
}

.li-4 {
	width: 4px; 
}

Terangkan, apakah hasil kompilasi kod berikut:

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

Terangkan, apakah hasil kompilasi kod berikut:

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