Sassのマップ機能を使った変数の管理方法

Sassには「マップ」というデータタイプが存在します。
ただ普通に変数を大量に並べて管理するよりも、より構造的に管理できるので、その方法についてまとめておきます。

マップの使い方

マップは連想配列のように、「キーとなる名前」と「値」をペアにして書きます。丸括弧で囲むのを間違えないように注意してください（慣れていないとCSSにつられて丸括弧を書いてしまう）。

$マップ名: (
  名前1: 値1,
  名前2: 値2,
  名前3: 値3
);

マップは入れ子にも出来ます。

$マップ名: (
  名前1: 値1,
  入れ子マップ名: (
    名前2: 値2,
    名前3: 値3
  ),
  名前4: 値4
);

マップに入れたデータを取り出したい時は、map-get()関数を使用します。
使い方は第一引数にマップ名、第二引数にキーとなる名前を入力するだけです。

map-get($マップ名, 名前1)
// 値1が取得できる

何が便利なのか？

簡単な使い方を聞いただけでは「何が便利なの？」という声が聞こえてきそうなので、ここから先は実際にデータを入れて、自分がどんな風に使っているのか説明していきます。

まず実際に名前と数値を入れてみたのが、下記のコード。
今回は色を管理する前提で$colorsというマップの中に色情報が入っています。

$colors: (
  main: #0075c2,
  sub: #a0d8ef,
  text: #333
);

このままだと変数名の先頭に「color_」を付けているのとあまり変わらない気がします。

$color_main: #0075c2;
$color_sub: #a0d8ef;
$color_text: #333;

ただ、マップを使うとeach文が書けます（配列を使っても可能）。

@each $colorName, $color in $colors {
  //.color_変数名 のclassを生成
  .color_#{$colorName} {
    color: $color;
  }
  //.bg_変数名 のclassを生成
  .bg_#{$colorName} {
    background: $color;
  }
}

上記のeach文をSassファイルの中に記述しておくと、マップ内の色情報を使用して、colorプロパティを変更する.color_mainクラスや、backgroundプロパティを変更する.bg_subクラスが自動で生成されます。

こんな風にマップ内のデータを元にしてクラスを生成するのは結構使えますし、変更があった場合はマップを書き換えればOKですし、データを追加すればまたクラスが追加されます。

マップ内のデータをすぐ呼び出せるようにする

ただ1つ不便なのが、マップ内のデータを呼び出したい時にmap-get($colors, main);と書く必要がある事です。かなり長い。
そこで、すぐマップ内のデータを呼び出すために関数を1つ作ってしまいます。

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

上記コードは、map-getを返してくれるシンプルなcolor()関数を定義しました。あとはコード内でcolor(名前)を打つだけでmap-getが返ってきて、最終的にデータを取り出せます。

color(main)
// map-get($colors, main);を返してくれる

今回は色のみのデータを管理しましたが、余白やブレークポイントなども同様に管理が出来ます。