Sass ではいくつか便利な関数が最初から定義されているので、それらを簡単に使うことができます。
むしろ関数の為に Sass を使っているようなものなのでぜひ使いましょう。
mix($color1, $color2, [$weight])
２つの色を混ぜます
color: mix(#fff, #000); // #888lighten($color, $amount) と darken($color, $amount)
それぞれ白か黒と混ぜる関数です。ホバー時に色を白く（黒く）したい時に手っ取り早く使えます。
color: lighten(#000, 30%); // #4d4d4d;
color: darken(#fff, 20%); // #ccc;adjust_hue($color, $degrees)
色相を回転させます。
color: adjust_hue(#f00, 90%); // #80ff00complement($color)
補色を取得。
color: complement(blue); // yellowsaturate($color, $amount) と desaturate($color, $amount)
鮮やかにするか、鈍くするか。
color: saturate(blue, 30%); // #0d0df3;
color: desaturate(blue, 100%); // #888;
// `grayscale` と同じ
color: grayscale(blue); // #888;この辺に色々定義してあります。
sass:color モジュール
新しくなったモジュールシステムではsass:colorを@useしてくることにより上記を扱えます。その場合上記のすべての関数はcolor.のようなプレフィックスを付ける必要があります。
@use "sass:color";
.selector {
color: color.saturate(blue, 30%);
}
