SCSS’de döngüler yani each, for ve while kullanımı ile devam ediyoruz. SCSS’deki each, for ve while döngülerini tıpkı programlama dillerinde olduğu gibi kullanıyoruz.
Sadece birkaç küçük değişiklik yapıyoruz. Örneğin önlerine “@” işaretini yazmak gibi..
Each, for ve while ile kodlarımızı yazarken hepsinde aynı Css çıktısını almaya çalışalım. Böylece aynı Css çıktısının each, for ve while ile nasıl yazıldığını karşılaştırabilirsiniz.
Css çıktılarımız aşağıdaki gibi olacak.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.m5 { margin: 5px; } .m10 { margin: 10px; } .m15 { margin: 15px; } .m20 { margin: 20px; } .m25 { margin: 25px; } |
Gördüğünüz gibi 5’den 25’e kadar margin değerlerini belli class isimlerine atadım. Sizde kendinize bu tarz kodlar hazırlayarak kod yazım hızınızı arttırabilirsiniz.
Örneğin bir div etiketi oluşturup class’ına m20 yazarsanız div’e margin değeri olarak 20px vermiş olursunuz.
|
1 2 3 |
<div class="m20"></div> |
Şimdi asıl konumuza dönelim ve sırasıyla kullanımlarına bakalım.
Eğer bildiğiniz bir programlama dili varsa each, for ve while kullanımlarında hiç zorlanmayacaksınızdır.
SCSS each Kullanımı
Scss Kodları
|
1 2 3 4 5 6 7 8 |
$sizes: 5,10,15,20,25; @each $size in $sizes { .m#{$size}{ margin: $size+px; } } |
Css Çıktısı
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.m5 { margin: 5px; } .m10 { margin: 10px; } .m15 { margin: 15px; } .m20 { margin: 20px; } .m25 { margin: 25px; } |
SCSS for Kullanımı
Scss Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/* through yazınca 5 dahil */ @for $size from 1 through 5{ $size: $size*5; .m#{$size}{ margin: $size+px; } } /* to yazınca 6 dahil değil */ @for $size from 1 to 6{ $size: $size*5; .m#{$size}{ margin: $size+px; } } |
Burada dikkat etmeniz gereken bir yer bulunuyor. Zaten kodların içerisinde de yorum satırı olarak ekledim.
Eğer döngüyü through anahtar kelimesiyle yazarsanız 5 değeri döngüye dahil olacaktır.
Eğer döngüyü to anahtar kelimesiyle yazarsanız 6 değeri döngüye dahil olmayacaktır.
Yukarıdaki 2 farklı kullanımda aynı Css çıktısını verecektir.
Css Çıktısı
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
/* through yazınca 5 dahil */ .m5 { margin: 5px; } .m10 { margin: 10px; } .m15 { margin: 15px; } .m20 { margin: 20px; } .m25 { margin: 25px; } /* to yazınca 6 dahil değil */ .m5 { margin: 5px; } .m10 { margin: 10px; } .m15 { margin: 15px; } .m20 { margin: 20px; } .m25 { margin: 25px; } |
SCSS while Kullanımı
Scss Kodları
|
1 2 3 4 5 6 7 8 9 |
$x:5; @while $x>0{ .m#{$x*5}{ margin: $x*5px; } $x: $x - 1; } |
Css Çıktısı
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.m25 { margin: 25px; } .m20 { margin: 20px; } .m15 { margin: 15px; } .m10 { margin: 10px; } .m5 { margin: 5px; } |
SCSS’de each, for ve while kullanımı bu şekilde.
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
