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

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

.signal-stop {
  color: #dd0000;
}

.signal-caution {
  color: #f4e542;
}

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

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

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

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

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

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

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

https://sass-lang.com/documentation/file.SASS_REFERENCE.html#each-multi-assign
https://sass-lang.com/documentation/file.SASS_REFERENCE.html#lists
https://www.sassmeister.com/