each文を使った繰り返し処理[SCSS]

each文を使った繰り返し処理[SCSS] マークアップ

配列に対して繰り返し処理を行うための構文——each文——について見ていきましょう。

each文の書き方

@each 変数 in 配列 {
  処理;
}
例1
$boxes: box1, box2, box3;
@each $box in $boxes {
  .#{$box} { background: url(#{$box}.jpg); }
}

/* 出力結果
.box1 { background: url(box1.jpg); }
.box2 { background: url(box2.jpg); }
.box3 { background: url(box3.jpg); }
*/

コメント

タイトルとURLをコピーしました