SASS ve SCSS'te For ve While Döngüleri

Merhaba. Bu yazımda SASS ve SCSS'te kullanılan for ve while döngülerinden bahsedeceğim. Programlama dillerinde olduğu gibi SASS ve SCSS'te de for döngüsü başlangıcı ve bitişi belli olan döngüdür. While döngüsü ise şart sağlandığı sürece çalışan döngüdür. Şimdi sırayla bu döngülere hem SASS hem de SCSS'te göz atalım.

FOR DÖNGÜSÜ

SASS içerisinde for döngüsünün kullanımı aşağıdaki gibidir.

@for $i from 1 through 5 
    .baslik-#{$i}
        font-size: 10 + $i + px

Aynı yapının SCSS'te oluşturulmuş hali ise şu şekildedir:

@for $i from 1 through 5 {
    .baslik-#{$i} {
        font-size: 10 + $i + px ;
    }
}

Bu iki yapının da derlenmiş hali yani CSS çıktısı da aşağıdaki gibidir.

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

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

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

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

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

Örnekte de görüldüğü gibi for döngüsünde $i değişkenini kullanarak seçici isimlerini veya stil özelliklerini dinamik olarak çoğaltabilirsiniz.

WHILE DÖNGÜSÜ

Aynı işlemi while döngüsü kullanarak yapmaya çalışalım. SASS ile başlayalım.

$sayi : 1 

@while ($sayi<=5)
    .baslik-#{$sayi}
        font-size: 10 + $sayi + px
        $sayi : $sayi +1

SCSS'te ise devam edelim.

$sayi : 1;

@while ($sayi<=5) {
    .baslik-#{$sayi} {
        font-size: 10 + $sayi + px;
        $sayi : $sayi +1;
    }
}

Bu iki yapının da çıktısı aşağıdaki gibi olacaktır.

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

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

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

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

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

While döngüsünde şart kısmında kullandığınız değişkeni döngü içerisinde arttırmayı veya azaltmayı unutmayın. Yoksa sonsuz döngü açılmış olacak ve compile işlemi bitmeyecektir.

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