【SCSS】@eachで、キーを使った配列

@eachとは？

配列の数の分だけ、繰り返し処理を行います。

どんな時に使うか？

sample.scss

.block {
  .element1 {
    border: solid 1px black;
    color: black;
  }

  .element2 {
    border: solid 1px red;
    color: red;
  }

  .element3 {
    border: solid 1px green;
    color: green;
  }
}

今回の場合は、要素ごとに色が異なります。
これをまとめてループ処理にします。

【書き方】

@each $変数名 in $リスト名{
  処理
}

sample.scss

$colors: (1:black, 2:red, 3:green);

@each $key, $color in $colors {
  .block {
    .element#{key} {
      border: solid 1px $color;
      color: $color;
    }
  }
}

参考

・3-2. ループ処理（each・for・while）で繰り返し記述する手間を省く