Less Döngü Kullanımı (Loops)

Less Döngü Kullanımı

Less döngü kullanımı aslında son derece basittir. Less de döngüler sizi büyük bir iş fazlasından kurtarır. Bu yüzden benim için Less içinde yer alan en güzel özelliklerden biridir.

Less de Loops yani döngüler iki ayrı less özelliğini kombine ederek oluşturulur. Bunlar Guard Expressions ve Pattern Matching dir.

İlk olarak Less de döngülerin mantığını anlayalım.

.dongu(@sayi) when (@sayi > 0) {  
  .ust-bosluk-@{sayi}0 {
    top: @sayi * 10px;
  }
.dongu((@sayi - 1));
}

Örnek Kod Açıklaması;

  • Satır 1: Döngüyü başlatır ve @sayi adında bir değer alır. Döngünün başlama koşulu ise (@sayi > 0) yani verilen değer sıfından büyük ise başlar.
  • Satır 2: Döngü her döndüğün de “ust-bosluk-@{sayi}0” adında bir class seçici oluşturur.
  • Satır 3: Döngü her döndüğün de verilen değeri 10px ile çarpar.
  • Satır 4: Class seçicisinin kapanışı.
  • Satır 5: Döngü her döndüğünde verilen değeri 1 sayı azaltır.
  • Satır 6: Döngü kapanışı.

[highlight background=”” color=””]Yukarıdaki örnek kod döngüyü hazırlar ama çalıştırmaz. Döngüyü çalıştırmak için @sayi değerinin “0” (Sıfır)’dan büyük olması gereklidir.[/highlight]

Döngüyü Çalıştıralım;

.dongu(@sayi) when (@sayi > 0) {  
  .ust-bosluk-@{sayi}0 {
    top: @sayi * 10px;
  }
.dongu((@sayi - 1));
}

.dongu(10);

Yukarıda gördüğünüz gibi 8-10 satırları arasında döngüyü çalıştırdık. Php dilini kullanan arkadaşlar fonksiyonların nasıl çalıştığını iyi bilir less teknolojisinde döngüler php deki fonksiyonlar gibi derlenir. Siz döngüyü hazırlasanız bile işlem yapmazlar ta ki siz onu çalıştırana kadar. 

[alert style=”warning”]Yukarıdaki örnekte “.dongu()” gibi bir kullanım yapamazsınız çünkü döngü içinde @sayi değerini belirlenmemiştir. Kullanabilmek için değer atanmalıdır örnek olarak birinci satırı şöyle yazmalıyız “.dongu(@sayi:5) when (@sayi > 0) { ” bu şu demek eğer @sayi değişkenine değer verilmez ise varsayılan 5 olsun.[/alert]

Yukarıdaki Less kodunun CSS çıktısı

.ust-bosluk-100 {
  top: 100px;
}
.ust-bosluk-90 {
  top: 90px;
}
.ust-bosluk-80 {
  top: 80px;
}
.ust-bosluk-70 {
  top: 70px;
}
.ust-bosluk-60 {
  top: 60px;
}
.ust-bosluk-50 {
  top: 50px;
}
.ust-bosluk-40 {
  top: 40px;
}
.ust-bosluk-30 {
  top: 30px;
}
.ust-bosluk-20 {
  top: 20px;
}
.ust-bosluk-10 {
  top: 10px;
}

CSS çıktısında da gördüğünüz gibi class değeri “ust-bosluk-xx” olan elemanlarımız için sıralı “top” değeri aldık.

Aşağıda da genel kullanımını görebilirsiniz.

See the Pen Less Loop by Ömer ERKAN (@omererkan) on CodePen.21587

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir