SASS'ta @for Direktifi

@for direktifi ile sayaç değişkeni tarafından belirtilen miktarda belirli stiller oluşturulabilir. @for'un ilk yazım şekli şu şekildedir:

@for $var from (başlangıç) through (bitiş)

Bu durumda, aralık (başlangıç) ve (bitiş) değerlerini kesinlikle içerir. (başlangıç) ve (bitiş)'in tam sayı döndürmesi gerektiğine dikkat edilmelidir, çünkü sayım yönünü belirlerler, yani eğer (başlangıç) (bitiş)'ten küçükse, sayaç artacak ve tam tersi durumda azalacaktır.

@for direktifinin çalışmasını ilk sözdizimi varyantında aşağıdaki örnekle inceleyelim:

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

Derleme sonucu:

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

İkinci varyantta yazım şu şekildedir:

@for $var from (başlangıç) to (bitiş)

Burada (bitiş) değeri dahil edilmez.

Önceki örneği alıp ikinci varyantta yazalım:

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

Şimdi ortaya çıkan koda dikkat edin:

.li-1 {
	width: 1px; 
}

.li-2 {
	width: 2px; 
}

.li-3 {
	width: 3px; 
}

.li-4 {
	width: 4px; 
}

Aşağıdaki kodun derleme sonucunun ne olacağını açıklayın:

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

Aşağıdaki kodun derleme sonucunun ne olacağını açıklayın:

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