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

Sezai AlkanFrontend Developer

Sass-Scss #sass #scss #css #for

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