blender feedly hatena Illustrator jquery palette photoshop pocket mail border-color insert-comment file-download person creative-commons-attribution creative-commons-noderivs creative-commons-noncommercial-us creative-commons-public-domain creative-commons-sharealike creative-commons emoji-happy emoji-neutral emoji-sad magnifying-glass file-o clock-o tag bars desktop quill music folder-open embed2 mail4 google facebook facebook3 twitter twitter3 feed4 wordpress pinterest html5 css3
Web

【Sass】functionを使って簡単にカラーバリエーションを作る方法

,
,
sass color function
Sassでの色指定は、変数を使えて便利ですよね!非常にお世話になっております。さらに変数に加えて関数(function)を使うと、ちょっとした色のバリエーションが簡単に指定できてしまいます。というわけで、Sassでサクッとカラーバリエーションを作る方法をまとめてみました。

基本

Sassで色を扱う際は、変数を指定することが多いと思います。

DEMO

box

html

Sass

あらかじめ「$変数名:色指定;」で、変数に色を格納します(1・2行目)。 同じ色を指定したい場合には、変数を指定すればOK(12・13行目)。後から「ちょっと色変えたい」という場合も、変数部分の1カ所を変えれば全ての色指定が変更されます。記述箇所の見落としがなくなるので、とても重宝しますね!もちろん、RGB指定でも大丈夫です。

バリエーションを作ろう

Sassのデフォルトfunction(関数)を使うと、あらかじめ決めたメインカラーを基にして、サクッと統制のとれたカラーバリエーションが作れます!
他にもグレースケールやら補色を作るやら色々あるみたいですが、自分的に使いどころが少なそうだったので割愛しました。詳しくはSassのDocumentationへどうぞ!

Module:Sass::Script::Functions-Sass Documentation

透明度をつける : rgba

DEMO

box1
box2
box3
box4

html

Sass

透明度をつける場合はrgba関数を使います。 書き方は、「rgba(色指定, 透明度)」です。色指定は変数も使えます。透明度も普通のCSSみたいに指定すればOKです。もちろん、透明度の部分を変数にしても問題ありません。 ほぼCSSと同じなので、間違えにくくていい感じですね!

色相を変える : adjust-hue

DEMO

box1
box2
box3
box4

html

Sass

彩度・明度は同じで、色相だけ変化させたい場合は、adjust-hue関数を。 「adjust-hue(色指定, 色相)」のように記述します。色相は角度(deg)で指定してください。ちなみに180degを指定すると、ちょうど補色ができます。

彩度を上げる : saturate

DEMO

box1
box2
box3
box4

html

Sass

saturateは、色相・明度は同じままで、彩度を上げます。 記述は「saturate(色指定, 彩度を上げる量)」でOKです。彩度を上げる量は0%から100%で指定します。ちなみに彩度が上がりきってしまうと、それ以上は変化しませんので…。

彩度を下げる : desaturate

DEMO

box1
box2
box3
box4

html

Sass

彩度を下げる場合は、desaturateを使用します。 記述は「saturate(色指定, 彩度を下げる量)」。数値はsaturateと同じく0%〜100%の間で指定します。こちらも彩度が下がりきるとグレースケールになって、それ以上は変化しません。

明度を上げる : lighten

DEMO

box1
box2
box3
box4

html

Sass

色相・彩度を維持して明度を上げるにはlightenを使います。 記述は「lighten(色指定, 明度を上げる量)」です。後は大体saturateと同じです。明度を上げる量は0%〜100%で指定、明度が上がりきったら真っ白になります。

明度を下げる : darken

DEMO

box1
box2
box3
box4

html

Sass

明度を下げる場合はdarkenです。 記述は大体予想がついていると思いますが、「darken(色指定, 明度を下げる量)」です。デジャヴ。同じく明度の下げ具合は0%〜100%の数値で指定します。明度が下がりきると真っ黒になります。

色を混ぜる : mix

DEMO

main
sub
mix20%
mix80%

html

Sass

mix関数では、指定した色を混ぜ合わせることができます。 書き方としては、「mix(色その1, 色その2, 混ぜる度合い)」という感じ。混ぜ度合いは%で指定します。数値が小さいと2番目に記述した色が濃く、数値が大きいと最初に記述した色が濃くなるみたいです。 こうなると、もはやバリエーションというか違う色ですけどね…?2色間のグラデーションがキレイに作れるので、割と重宝しますよ!

まとめ

いかがだったでしょうか?
基本カラーは決めたとしても、「ちょっと薄めの色が欲しい…」とか「シャドウの色が欲しい…」とかいう時って結構ありますよね!Sassの関数を使えば、いちいち色を作らなくても良いのがステキです。基本カラーが後から変わっても、変数を使っていれば…まるっと変わってくれる!ステキ! 自分でコードが管理しやすいように、ガンガン使っていきたいと思いますー。
それではまた!