Sassで@functionとmap-get()を使ったカラーマネジメントを試してみる
Sassにはいろんな便利機能が揃っていますが、今回は@functionとmap-get()を使ってカラーを管理する方法を見ていきたいと思います。過去記事「Sassのマップ変数を活用して複雑なメディアクエリを一括で管理する」にてメディアクエリのブレークポイントを扱ってmixinで使う方法を紹介していましたが、今回もその応用で、@functionでマップ変数の値を出力する形になります。
今回はSassの@functionとmap-get()でカラーマネジメントする方法についてまとめてみました。デザインシステムがしっかりと設計されている場合にはカラーを管理するロジックも必要となりますが、この方法を使うことでそのロジックをそのままコーディングに持ち込むことができるのではないでしょうか。今回はUI要素のステート用カラーを例にしましたが、サイト全体の配色やSNSカラーの色分けなどにも使えそうですね。
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カラーの色分けなどにも使えそうですね。
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
categories