Yücel Alkan

SASS ve SCSS'te Each Döngüsü

Merhaba. Bu yazımda SASS ve SCSS'te kullanılan each döngüsünden bahsedeceğim. Each döngüsü ile oluşturduğumuz liste veya map içerisindeki eleman sayısı kadar döngü oluşturup, bu yapılar içerisindeki her bir elemana erişim sağlamak mümkündür. SASS ve SCSS'teki list ve map yapıları, programlama dillerindeki dizilere benzemektedir.

Öncelikle each döngüsü ile list dediğimiz yapılar üzerinde işlem yapalım. SASS ile başlayalım.

$boyutlar : 1,2,3,4,5,6

@each $boyut in $boyutlar
    .baslik-#{$boyut} 
        float: left 
        font-size: 10 + $boyut + px

Aynı yapısı SCSS'te de oluşturalım.

$boyutlar : 1,2,3,4,5,6;

@each $boyut in $boyutlar {
    .baslik-#{$boyut} {
        float: left ;
        font-size: 10 + $boyut + px;    
    }
}

Bu iki dosyanın de derlenmiş hali aşağıdaki gibi olacaktır. 

.baslik-1 {
  float: left;
  font-size: 11px;
}

.baslik-2 {
  float: left;
  font-size: 12px;
}

.baslik-3 {
  float: left;
  font-size: 13px;
}

.baslik-4 {
  float: left;
  font-size: 14px;
}

.baslik-5 {
  float: left;
  font-size: 15px;
}

.baslik-6 {
  float: left;
  font-size: 16px;
}

Gördüğünüz gibi hem seçici isimlerini hem de font-size değerlerini dinamik olarak oluşturmuş olduk. 

MAP YAPILARI İÇİN EACH KULLANIMI

Map yapıları, list'lerden farklı olarak anahtar : değer şeklinde bir yapıya sahiptir. Şimdi de map yapılarındaki verilere each döngüsü ile erişim sağlayalım. Önce SASS ile başlayalım. 

$boyutlar : ( 1 : 100, 2 : 150, 3 : 200, 4 : 250 )

@each $isim,$boyut in $boyutlar 
    .kutu-#{$isim}
        float: left 
        width: $boyut + px

Aynı yapıyı SCSS üzerinde de oluşturalım. 

$boyutlar : ( 1 : 100, 2 : 150, 3 : 200, 4 : 250 );

@each $isim,$boyut in $boyutlar {
    .kutu-#{$isim} {
        float: left ;
        width: $boyut + px
    }
}

Bu örnekteki $isim değişkeni ile map yapısı içinde yer alan anahtarlara yani 1, 2, 3, 4 değerlerine erişim sağlıyorum. $boyut değişkeni ile de değerlere yani 100, 150, 200, 250 değerlerine erişim sağlıyorum. Tabi ki bu değişkenlere dilediğiniz isimleri verebilirsiniz. Bu iki yapının da derlenmiş hali aşağıdaki gibi olacaktır. 

.kutu-1 {
  float: left;
  width: 100px;
}

.kutu-2 {
  float: left;
  width: 150px;
}

.kutu-3 {
  float: left;
  width: 200px;
}

.kutu-4 {
  float: left;
  width: 250px;
}

Önceki örnekte olduğu gibi bu örnekte de hem seçici isimlerini hem stil özelliklerini dinamik olarak oluşturmuş oldum.

Bu içeriğe ait video derse aşağıdan ulaşabilirsiniz.

Soru ve görüşlerinizi yorum olarak belirtebilirsiniz. Hayırlı çalışmalar dilerim.

Yorumlar
Bu içeriğe henüz yorum yapılmamıştır. İlk yorum yapan siz olun!
Yorum Yapın