SASSにおける@eachディレクティブ
スタイルを一連のオブジェクトに適用するには、
@eachディレクティブを使用します。
それは次のように記述されます：
@each $var (変数) in (値のリスト)
このディレクティブの動作の本質は、
リスト内の各値を変数$varに設定し、
その後、各スタイルでそれを出力することです。
例を見てみましょう：
@each $picture in winter, spring, summer, autumn {
img .#{$picture} {
background-image: url('/images/#{$picture}.jpg');
}
}
コンパイル結果：
img .spring {
background-image: url("/images/spring.jpg");
}
img .summer {
background-image: url("/images/summer.jpg");
}
img .autumn {
background-image: url("/images/autumn.jpg");
}
次のコードのコンパイル結果はどうなりますか？
@each $link in menu, navbar, footer {
link .#{$link} {
color:red;
}
}
