• ..

Sass

    役に立つカラー関数

    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;

    この辺に色々定義してあります。