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

Sezai AlkanFrontend Developer

Sass-Scss #sass #scss #css #while

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