新規のプロジェクトとか受託案件とかの初期段階でない限りプロジェクトで使うカラーバリエーションをまるっと作る機会ってなさそうだけど機械的にカラーバリエーションを作れる方法ができたから記録として。
カラーバリエーションを生成する
// デフォルトのカラーセット $colors: ( default: #A0AEC0, primary: #3182CE, success: #38A169, info: #00B5D8, warning: #D69E2E, danger: #E53E3E, ) !default; @function light($color) { @return saturate(lighten($color, 13%), 15%); } @function dark($color) { @return saturate(darken($color, 13%), 7%); } // カラーバリエーションの map を返す @function create_colors_map($color) { @return ( default: $color, light: light($color), dark: dark($color), ); } // $colors のキーにカラーバリエーションが割り当てられた map を作成 $ui-colors: (); @each $color, $hex in $colors { $map: ($color: create_colors_map($hex)); $ui-colors: map-merge($ui-colors, $map); } // $ui-colors からキーワードとバリエーションのカラーを返す関数 @function ui-color($key: default, $type: default) { $colorSet: map-get($ui-colors, $key); @if $colorSet == null { @return null; } @return map-get($colorSet, $type); }
使い方
.bg-praimary { background-color: ui-color(primary); // => #3182CE } .bg-praimary--light { background-color: ui-color(primary, light); // => #58a3e9 } .bg-praimary--dark { background-color: ui-color(primary, dark); // => #1e609f } // each でまるっとクラス定義 @each $key in map-keys($colors) { .bg-#{$key} { background-color: ui-color($key); &--light { background-color: ui-color($key, light); } &--dark { background-color: ui-color($key, dark); } } }
₍ ᐢ. ̫ .ᐢ ₎ できた。
機械的に色を変更するならこのコードを使えば簡単にカラーバリエーションが作れそうです。
ただ元の色によっては同じ設定だと色味が明るすぎるとか暗すぎるとかになると思うので、丁寧にやるなら個別設定とか設定上書きするとかですかね〜
所管
Sass (SCSS) とか書くの1億年ぶり過ぎて map もループも変数の扱いも綺麗サッパリ忘れちゃってたね!ガハハ
Sass (SCSS) ちょとした実験にもコンパイルが必要だから毎度 Code pen とかに書いてたけど sassmeister ってオンラインでどうコンパイルされるか見れるツールがあるんですね! (debug が見れたら最高だったのだが… )
[参考]
- css - SASS : How to generate a map using a loop - Stack Overflow
- Sassで@functionとmap-get()を使ったカラーマネジメントを試してみる | 大阪市天王寺区ホームページ制作 | 合同会社デザインサプライ-DesignSupply. LLC-
- Sassを使うなら知っておくと便利な色まわりの小技やMixinいろいろ | Webクリエイターボックス
- Sass Color Generator が配色指定をlighten/darkenでするときに便利すぎる
- Sass: @each
- Sass: @function
- Sass: @if and @else
- Sass: @debug
- SassMeister | The Sass Playground!