SASS'ta @each Direktifi
Bir stil uygulamak için
bir dizi nesneye
@each direktifi kullanılır.
Şu şekilde yazılır:
@each $var (değişken) in (değer listesi)
Bu direktifin çalışma mantığı,
listedeki her bir değeri
$var değişkenine ataması
ve ardından her stil içinde onu kullanmasıdır.
Bir örneğe bakalım:
@each $picture in winter, spring, summer, autumn {
img .#{$picture} {
background-image: url('/images/#{$picture}.jpg');
}
}
Derleme sonucu:
img .spring {
background-image: url("/images/spring.jpg");
}
img .summer {
background-image: url("/images/summer.jpg");
}
img .autumn {
background-image: url("/images/autumn.jpg");
}
Aşağıdaki kodun derleme sonucunun ne olacağını açıklayın:
@each $link in menu, navbar, footer {
link .#{$link} {
color:red;
}
}
