以前「Sass」の導入について記事を書きましたが、
自分のメモついでに便利な書き方を紹介していこうかと思います。
前回は「変数」でした。
——————-
$Color: #000;
p{color:$Color;}
——————-
「$Color」にサイトカラーを指定し、
後は変数名で呼び出す方法でしたね。
今回はサイトカラーを基準に、色を変更する関数の紹介です。
——————-
lighten($Color, ●%);
darken($Color, ●%);
saturate($Color, ●%);
desaturate($Color, ●%);
——————-
ベースカラーを基準に、
「lighten」は明度を上げ、「darken」は明度を下げます。
「saturate」は彩度を上げ、「desaturate」は彩度を下げます。
——————-
$Color: #000;
p{color: lighten($Color, 50%);}
——————-
↑こんな使い方ですね。
CVエリアに、サイトカラーより鮮やかな色を設定したい！
なんて時に一発で設定が出来ますし、
万が一サイトカラーが変わることがあったとしても
変更後のカラーをベースにコンパイルしなおしてくれますので
メンテナンス性もばっちりですね。
——————-
adjust-hue($Color, 180deg);
——————-
↑こんな関数もあり、
色相環を基準に180度回転させた色。
というふうに一発で補色が設定できたりします。便利！
組み上げるには手間もかかりますが、
色々な設定が可能ですので、試してみるのも面白いですよ。
ぴの子
Staff blog
