Sass でマップ（連想配列）を使用する

Sass では、キーとバリューで扱う連想配列を使用する事ができます。リスト型と同じように @each でリスト内をループしたり関数を使って任意の値を取り出したりすることができます。

参考：Sass Documents

マップ変数定義

Sass ファイル内でマップ変数を定義するには、次のような構文を使用します。マップを定義するには、キー・バリューをカンマで区切って並べ、全体を括弧 「()」 で括ります。

$変数名: (key1: value1,, key2: value2, key3: value3);

例えば、次のように定義します。

$_headers: (h1: 1.6rem, h2: 1.4rem, h3: 1.2rem);

@each $tag, $size in $_headers {
  #{$tag} {
    font-size: $size;
  }
}

上記定義をコンパイルすると変数部分が置き換わり CSS として次のように出力されます。

h1 {
  font-size: 1.6rem; }

h2 {
  font-size: 1.4rem; }

h3 {
  font-size: 1.2rem; }

@each を使って列挙すると、キーとバリューを取得することができます。

マップ用の関数

Sass のマップ変数を操作するために、次のような関数が用意されています。

length($map)

マップ変数内の要素数を取得します。

$_headers: (h1: 1.6rem, h2: 1.4rem, h3: 1.2rem);

length($_headers)  //・・・ 3 が返ります。

map-get($map, $key)

指定したキーに対応する値を取得します。

$_headers: (h1: 1.6rem, h2: 1.4rem, h3: 1.2rem);

map-get($_headers, h2)  //・・・ 1.4rem が返ります。

存在しないキーを指定した場合は、null を返します。

map-merge($map1, $map2)

2つのマップをマージして新しいマップを作成します。

$list1 : (apple: #d01, orange: #f95);
$list2 : (pineapple: #fd8);
 
$list : map-merge($list1, $list2)  //・・・ (apple: #d01, orange: #f95, pineapple: #fd8) が返ります。

2つのマップに同じキーがある場合、2つめの値が優先的に使用されます。

map-remove($map, $keys…)

マップから指定したキーを削除したマップを作成します。

$list : (apple: #d01, orange: #f95, banana: #fd8);

map-remove($list, "orange")  //・・・ (apple: #d01, banana: #fd8) が返ります。

map-keys($map)

マップのキーを全て取得します。

$list : (apple: #d01, orange: #f95, banana: #fd8);

map-keys($list)  //・・・ apple, orange, banana が返ります。

map-values($map)

マップの値（バリュー）を全て取得します。

$list : (apple: #d01, orange: #f95, banana: #fd8);

map-values($list)  //・・・ #d01, #f95, #fd8 が返ります。

map-has-key($map, $key)

マップに指定されたキーを含んでいるかを調べます。

$list : (apple: #d01, orange: #f95, banana: #fd8);

map-has-key($list, orange)  //・・・ true が返ります。
map-has-key($list, pineapple)  //・・・ false が返ります。

Mixin や関数に渡された可変長引数をマップで取得する

keywords 関数を使用すると、Mixin や関数に渡された可変長引数をキー・バリューの形式で取得することができます。

@mixin hoge($args...) {
  $list: keywords($args);  //・・・ (arg1: val, arg2: val)
}