Sass-Scss Each Kullanımı

sezaialkan
Sezai Alkan Frontend Developer

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

Yorumlar

Yorum Yapabilmek İçin Giriş Yapmalısınız.
İlk Yorum Yapan Sen Ol!
Uçur Beni Kahramanım Yukarı Çık
Bu web sitesi çerezleri kullanıyor. Devam ederek çerez kullanımını kabul etmiş oluyorsunuz. Detay

Devam Etmek İçin Giriş Yapın

Kod Hocası İle Paylaşımda bulunabilir, Kendini geliştirebilirsin. Sende Hemen Giriş Yap Aramıza Katıl.

GirişKayıt Ol