Sassでカラーパレットを作りたくなったので自分用メモ.
ベースとなる色(3色+グレー)について,その明るさを変化させた色を,css変数として利用できるようにします.
(細かい用語などの間違いはご愛嬌ということで…)
コード全体
@use 'sass:color';
:root {
// color palette
// based on https://www.colordic.org/w
// primary: AZUKI
$primary: #96514d;
// secondary: KOGANE
$secondary: #e6b422;
// tertiary: MOEGI
$tertiary: #006e54;
// neutral: gray
$neutral: #808080;
// create color palette
$color-step: 0, 2, 5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 98, 100;
@each $i in $color-step {
--color-primary-#{$i}: #{color.scale($primary, $lightness: (($i - 50) * 2%))};
--color-secondary-#{$i}: #{color.scale($secondary, $lightness: (($i - 50) * 2%))};
--color-tertiary-#{$i}: #{color.scale($tertiary, $lightness: (($i - 50) * 2%))};
--color-neutral-#{$i}: #{color.scale($neutral, $lightness: (($i - 50) * 2%))};
}
}
やっていること
Sassには,色調を変化させる関数scale()
が用意されているので,これを利用します.
1. sass:color
の読み込み
scale()
は,sass:color
というビルトインモジュールを読み込むことで,利用可能になります.
@use 'sass:color';
2. scale()
関数の利用
scale()
関数の引数はいくつかありますが,今回は明度(Lightness)のみを変化させます.
scale()
関数の引数のうち,色($color
)のみは,引数名を指定する必要はありませんが,それ以外の引数は$引数名: 値
の形式で記述する必要があります.
明度などの各パラメータは,-100%から100%までの値を設定することができます.今回は,パラメータを不等間隔で設定する都合上,あらかじめSass変数として数値の配列を作っておいて,@each
で繰り返し処理を行います.
@each $i in $color-step {
--color-primary-#{$i}: #{color.scale($primary, $lightness: (($i - 50) * 2%))};
--color-secondary-#{$i}: #{color.scale($secondary, $lightness: (($i - 50) * 2%))};
--color-tertiary-#{$i}: #{color.scale($tertiary, $lightness: (($i - 50) * 2%))};
--color-neutral-#{$i}: #{color.scale($neutral, $lightness: (($i - 50) * 2%))};
}
参考
公式ドキュメント: https://sass-lang.com/documentation/modules/color/#scale