SCSSの「each」の使い方

SCSSでは each を使って繰り返しを指定することができます。

今回は「each」を使ったスタイルの設定方法についてご紹介します。

@each

each では配列を使ってスタイルをまとめて設定することができます。

背景色指定のスタイルを作るサンプル

SCSS

$colors: (
  red: #a33,
  green: #3a3,
  blue: #33a,
  pink: #faa,
  yellow: #ff3,
);
  
@each $key, $val in $colors {
  .block-#{$key} {
    background-color: $val;
  }
}

CSS

.block-red {
  background-color: #a33
}

.block-green {
  background-color: #3a3
}

.block-blue {
  background-color: #33a
}

.block-pink {
  background-color: #faa
}

.block-yellow {
  background-color: #ff3
}

変数 $colors にマップ配列で使いたい色の key と値を格納します。

@each で $colors の内容を処理ます。

eachの中では、$key と $val を使ってClassと背景色の色指摘を記述します。

この方法でClassを作成すれば記述するSCSSの量は数行で済みますし、色の追加や削除は配列の中を変更するだけになるため対応が楽になります。