Sass-Scss While Döngüsü Kullanımı

sezaialkan
Sezai Alkan Frontend Developer

Sass ve scss de While Döngüsü diğer programlama dillerinde olduğu gibi şart sağlandığı sürece sonsuz döngü olarak çalışmaktadır.

While tanımlamasını yaparken @while (Koşul) şeklinde kullanımı mevcuttur

$baslik : 1

@while ( $baslik < 6 )
    .h
        font-size: $baslik + px 

Yukarıdaki örnekte $baslik değişkenimiz 6 dan küçük olduğu sürede while döngümüz sonsuz bir şekilde çalışacaktır. Böyle çalışma işlemi sağlamanız durumunda derleyiciniz veya programınız hata verebilmektedir. Döngünün böyle sonsuz bir şekilde çalışmaması için her defasında $baslik değişkenini 1 veya 2 arttırabiliriz böylece değişkenimiz değeri 6 ve üzeri olduğunda while döngümüz çalışmayacaktır.

$baslik : 1

@while ( $baslik < 6 )
    .h
        font-size: $baslik + px 
        $baslik : $baslik + 1

Css Ekran Çıktısı :

.h {
  font-size: 1px;
}

.h {
  font-size: 2px;
}

.h {
  font-size: 3px;
}

.h {
  font-size: 4px;
}

.h {
  font-size: 5px;
}

Stil sınıflarımızın adlarınıda benzersiz kılmak istiyor isek başlığın kenarına #{$baslik} şeklinde kullanım sağlayabiliriz.

$baslik : 1

@while ( $baslik < 6 )
    .h-#{$baslik}
        font-size: $baslik + px 
        $baslik : $baslik + 1

Css Ekran Çıktısı :

.h-1 {
  font-size: 1px;
}

.h-2 {
  font-size: 2px;
}

.h-3 {
  font-size: 3px;
}

.h-4 {
  font-size: 4px;
}

.h-5 {
  font-size: 5px;
}  

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