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

Sass 2020.09.21

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

Tags: ,

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カラーの色分けなどにも使えそうですね。

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?