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
}

引用・参考

Sassで色を管理する色々な方法 - QiitaSassの便利な機能のひとつに変数があります。変数にマップや@eachを併用すると、柔軟に色を管理することができたり、自動化させることができます。 変数 まずはシンプルに変数を使ったパターン。 color-faceboo...Qiita

マップ用の関数は、 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;
}

引用・参考

Sass 3.3で追加された新しいデータタイプ「マップ」まとめ解説連載： Sass 3.3まとめ解説 (2)前回の記事では、Sass 3.3で追加される「&」の新機能と@at-rootについて解説しました。今回は新しいデータタイプの「マップ」について解説しまHTML5Experts.jp

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