メニュー

WEBMEMOする。とあるクリエイターの個人的な備忘録。

Sass(SASS・SCSS)でカラーを変更する関数のまとめです。明るくしたり暗くしたり、鮮やかにしたり透明にしたりできる便利なあれ。

英語サイトなんかではcolor functionと書かれています。

何があるかは覚えてるけど綴りが覚えれなくていつも調べ直してしまいます。笑

//明度
lighten($color, 15%);
darken($color, 15%);

//彩度
saturate($color, 15%);
desaturate($color, 15%);

//色相
adjust-hue($color, 50deg);

//透明度・不透明度
transparentize( $color, 0.8 );
rgba( $color, 0.2 );

//白/黒とミックスさせる? (明度とだいたい同じ)
tint($color, 15%);
shade($color, 15%);

英語ですが、こちらのサイトでそれぞれ詳しく説明されています。

また、どのように色が変化しているかを実際に見ながら調節できる、「Sass Color Generator」というすごく便利なサイトもありますので、このようなサイトも活用すると作業がはかどります!

 

目次
    - Thank you for reading this to the end. -

    コメントする

    CAPTCHA


    TOPへ Top