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

sezaialkan
Sezai Alkan Frontend Developer

Sass ve Scss de For Döngüsü kullanımı, Her programlama dilinde karşılaştığımız for döngüsü ile Sass ve Scss de de kullanımı birebir aynıdır. Belirlediğimiz bir sayıdan bir sayıya kadar kod bloğunu tekrar etmesini sağlamaktadır.

Sass ta for döngüsü kullanımında Değişkenimiz from Başlangıç Sayısı through Bitiş sayısı olarak söz dizimi olmaktadır.

@for $i from 1 through 3
    .border-size
        border : $i+px solid #ddd

Yukarıdaki örnekte for döngüsünün her tekrarında değişicek olan Değişkenimizi $i olarak belirtmekteyiz bu değişken ismini kendi kullanımınıza göre değiştirebilirsiniz.
Oluşturduğumuz değişkeni blok içerisinde de kullanımını sağlamaktayız. Örnek üzerindeki for döngüsü her tekrarlandığında $i değişkeni bir artarak işlem sağlayacaktır.

Css Ekran Çıktısı : 

.border-size {
  border: 1px solid #ddd;
}

.border-size {
  border: 2px solid #ddd;
}

.border-size {
  border: 3px solid #ddd;
}

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

@for $i from 1 through 3
    .border-#{$i}
        border : $i+px solid #ddd

Css Ekran Çıktısı :

.border-1 {
  border: 1px solid #ddd;
}

.border-2 {
  border: 2px solid #ddd;
}

.border-3 {
  border: 3px solid #ddd;
}

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