Sass-Scss Each Kullanımı

Sezai AlkanFrontend Developer

Sass-Scss #scss #sass #css #each

Sass ve scss de Each kullanımı, liste ve map değerlerinin bize sıralı bir şekilde döndürmesini sağlamaktadır. List kullanımı programlama dillerindeki dizi kullanımına benzemektedir.

Map de anahtar kelime bulundurulurken list de anahtar kelime olmadan kullanımı sağlanmaktadır.

$liste : 1, 2, 3, 4, 5

@each $aktar in $liste
    .list
        border : $aktar+px solid #ddd

Yukarıdaki örnek üzerinde List içerisinde oluşturduğumuz sayıları sırası ile each döngümüz içerisindeki list sınıfı içerine yazdırmaktayız.

Css Ekran Çıktısı :

.list {
  border: 1px solid #ddd;
}

.list {
  border: 2px solid #ddd;
}

.list {
  border: 3px solid #ddd;
}

.list {
  border: 4px solid #ddd;
}

.list {
  border: 5px solid #ddd;
}

Bu kullanım biraz yanlış olmuş olabilir döngünün bize değer olarak döndürdüğü sınıfların hepsi aynı isimle oluşmaktadır bu sınıflarımızı benzersiz yapmak için #{$aktar} söz dizimi ile isimlerini benzersiz yapabilmekteyiz.

$liste : 1, 2, 3, 4, 5

@each $aktar in $liste
    .list#{$aktar}
        border : $aktar+px solid #ddd 

Css Ekran Çıktısı :

.list1 {
  border: 1px solid #ddd;
}

.list2 {
  border: 2px solid #ddd;
}

.list3 {
  border: 3px solid #ddd;
}

.list4 {
  border: 4px solid #ddd;
}

.list5 {
  border: 5px solid #ddd;
}

Each döngüsü ile map kullanımında map içerisindeki anahtar kelime ile değeri ayrı ayrı sırasıyla yazdırabilmekteyiz.

$map : ( "mavi" : blue, "kirmizi" : red )

@each $anahtar, $deger in $map
    .mapl-#{$anahtar}
        color : $deger

Css Ekran Çıktısı :

.mapl-mavi {
  color: blue;
}

.mapl-kirmizi {
  color: red;
}