sass 3.3 以上で使えるようになった map について

今更ってかんじですが… css 風の書き方で json みたいなデータを作れるようです。
書き方のサンプルはこんなかんじ

$map: (
  key1: value1,
  key2: value2,
  key3: value3,
);
<||

以下はマップを使ったカラーパレットの管理の例です。

>||
$colors: (
  black: #000,
  gray: #888,
  white: #fff,
);

中の値を取り出すには、map-get()を使います。

@function colors($key){
  @return map-get($colors,$key)
};

.hoge{
  color: colors(black); // #000
}

また、データは入れ子にすることも出来ます。
これを使って、色をトーンにわけて管理したり出来ます。

$colors: (
  black: (
    default: #1a1a1a,
    dark: #000,
  ),
  gray: (
    default: #4c4c4c,
    light: #d8d8d8,
  ),
  white: (
    default: #fff,
    dark: #fafafa
  ),
  green: (
    default: #22d3c7
  ),
);

ネストされた中の値を取り出すには、map-get()をネストして使います。

@function colors($key,$tone: default){
  @return map-get(map-get($colors,$key),$tone)
};

.fuga{
  color: colors(black,dark); // #000
}

引用・参考qiita.com

マップ用の関数は、 map-get も含めて5つ。

• map-get($map, $key)................キーの値を取得する
• map-merge($map1, $map2)......マップを結合する
• map-keys($map).......................マップのキーをカンマ区切りで返す
• map-values($map)....................マップの値をカンマ区切りで返す
• map-has-key($map, $key)........マップにキーが含まれているか調べ真偽値を返す

@each を使って、複数クラスを自動生成するという使い方も。

.box {
    $config: (
        warn: red,
        info: blue,
    );
 
    @each $class, $bg-color in $config {
        @at-root #{&}-#{$class} {
            background-color: $bg-color;
        }
    }
}
<||

コンパイルすると以下のようになります。
>||
.box-warn {
  background-color: red;
}
.box-info {
  background-color: blue;
}

引用・参考html5experts.jp

@each ってグリッド作るときくらいしか使ったことなかったけど、マップと合わせて使うとすごい強力そう。