owned mediaウェブ制作に役立つコンテンツを発信中!

Sassで@functionとmap-get()を使ったカラーマネジメントを試してみる

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カラーの色分けなどにも使えそうですね。
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

sponserd

    keyword search

    recent posts

    • Twitter
    • Github
    contact usscroll to top
      • Facebook
      • Twitter
      • Github
      • Instagram