Sassにはいろんな便利機能が揃っていますが、今回は@functionとmap-get()を使ってカラーを管理する方法を見ていきたいと思います。過去記事「Sassのマップ変数を活用して複雑なメディアクエリを一括で管理する」にてメディアクエリのブレークポイントを扱ってmixinで使う方法を紹介していましたが、今回もその応用で、@functionでマップ変数の値を出力する形になります。  

map-get()メソッドでkey-value型のデータから値を取得

以前の記事でも軽く紹介していますが、Sassでは通常の変数に加えて、キーと値がセットになったデータ（マップ型）も変数として扱うことができます。こうすることで変数の値の中で関係性を持たせることができ、まとめたりする場合に便利です。

// 通常の変数
$variable: value;

// key-value（マップ）型の変数
$map-data: (
  key1: value1,
  key2: value2,
  key3: value3,
  .....
) !default;

  ちなみに変数には万が一の上書きを防ぐため上記のように「!default」フラグを指定しておいた方が良いですね。こうすることで定義した変数が上書きされなくなります。このような形のデータからmap-get()メソッドで値を取得する場合には下記のように記述します。

// value1の値を取得する
#{map-get($map-data, key1)}

  map-get()メソッドの第一引数には対象となるマップ変数を、第二引数にはマップ変数に含まれる取得したい値のキーを指定します。こうすることで対応するキーの値を取得することができます。また、map-get()メソッドでは変数を引数で扱うことになりますので「#{}」で囲うようにします。  

@functionと組み合わせてマップ変数の値を出力

上記のように定義したマップ変数の値を@functionを使って自由に取り出せるようにしていきます。今回は例としてUI要素のカラーを自由に切り替える場面をサンプルにして見ていきます。そこでこのようなHTMLを用意しました。 【HTML】※一部抜粋

<span class="error-message">エラーメッセージ</span>
<span class="warning-message">警告メッセージ</span>
<span class="notice-message">通知メッセージ</span>

  HTMLのそれぞれの要素は用途別に特定の色を当てたいというようなケースです。エラー用のテキストには赤色を、警告用には黄色を、通知用には青色を、というような感じですね。これらの色をSassの中でそれぞれキーを持たせてマップ変数に格納してみるとこのような形になります。 【Sass（SCSS）】

// functionを定義
$ui-color-list: (
  error: #B00,
  warning: #DA0,
  notice: #0CE,
  success: #0C4,
  negative: #AAA
) !default;
@function ui-color($ui-color-key) {
  @return #{map-get($ui-color-list, $ui-color-key)}
}

.error-message {
  color: ui-color(error)
}
.warning-message {
  color: ui-color(warning)
}
.notice-message {
  color: ui-color(notice)
}

  マップ変数からmap-get()メソッドで指定したキーで値を取得できるようにしますが、その処理を@functionで関数として定義します。返り値としてmap-get()で取得した値が入るようになっています。こうすることで、スタイルを指定する際にfunctionの引数にキーを入れるだけで、あらかじめ用意していたカラーコードを出力することができますね。   上記はSCSS記法の場合ですが、SASS記法では下記のようになります。SASS記法では改行がネスト扱いとなるため、行内にまとめる必要があります。値が少ない場合には問題ありませんが、多くなってくるとコードの見通しが悪くなるので注意が必要です。とはいえSCSS記法と比べるとかなりスッキリと記述できますね。 【Sass（SASS）】

// functionを定義
$ui-color-list: (error: #B00, warning: #DA0, notice: #0CE, success: #0C4, negative: #AAA) !default
@function ui-color($ui-color-key)
  @return #{map-get($ui-color-list, $ui-color-key)}

.error-message
  color: ui-color(error)
.warning-message
  color: ui-color(warning)
.notice-message
  color: ui-color(notice)

  Sassで書いたこれらのコードをCSSにコンパイルするとこのようになります。それぞれマップ変数で定義したカラーコードが適用されているのがわかりますね。 【CSS】

.error-message {
  color: #B00;
}
.warning-message {
  color: #DA0;
}
.notice-message {
  color: #0CE;
}

 

---

  今回はSassの@functionとmap-get()でカラーマネジメントする方法についてまとめてみました。デザインシステムがしっかりと設計されている場合にはカラーを管理するロジックも必要となりますが、この方法を使うことでそのロジックをそのままコーディングに持ち込むことができるのではないでしょうか。今回はUI要素のステート用カラーを例にしましたが、サイト全体の配色やSNSカラーの色分けなどにも使えそうですね。