More than 5 years have passed since last update.

Sass　map eachを使って色を指定する

Last updated at 2019-03-05Posted at 2019-03-05

以外と知らない人が多そうなので出力します。
各要素に応じて色を定義している場合があると思います。
例えば信号の状態を表現する以下のようなcssがあります。

.scss


.signal-stop {
  color: #dd0000;
}

.signal-caution {
  color: #f4e542;
}

.signal-go {
  color: #5ce053;
}

これをmapを使うと以下のように記述することができます。

.scss

$map: (stop: #dd0000, caution: #f4e542, go: #5ce053);

@each $state, $color in $map {
    signal-#{$state} {
        color: $color;
    }
}

例えば、これに信号が停電するような場合を追加する場合は

.scss

$map: (stop: #dd0000, caution: #f4e542, go: #5ce053, blackout: #000000 );

とすれば済みそうです。実際のコードでは状態が８つあったので大分スッキリさせることができました。