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

URL: https://webrandum.net/sass-map/
公開日: 2019-01-24
更新日: 2019-01-24
カテゴリー: コーディング
タグ: Sass
出典: Webrandum（著者: サイトウ マサカズ）

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);を返してくれる
```

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