Sass ではいくつか便利な関数が最初から定義されているので、それらを簡単に使うことができます。
むしろ関数の為に Sass を使っているようなものなのでぜひ使いましょう。

mix($color1, $color2, [$weight])

2つの色を混ぜます

color: mix(#fff, #000); // #888

lighten($color, $amount)darken($color, $amount)

それぞれ白か黒と混ぜる関数です。ホバー時に色を白く(黒く)したい時に手っ取り早く使えます。

color: lighten(#000, 30%); // #4d4d4d;
color: darken(#fff, 20%); // #ccc;

adjust_hue($color, $degrees)

色相を回転させます。

color: adjust_hue(#f00, 90%); // #80ff00

complement($color)

補色を取得。

color: complement(blue); // yellow

saturate($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%);
}

JavaScript で飯食べたい歴約 5 年、 純( nju33 ) によるノートサイトです。

このサイトではドリンク代や奨学金返済の為、広告などを貼らせて頂いてますがご了承ください。

Change Log