Web
【Sass】functionを使って簡単にカラーバリエーションを作る方法
Sassでの色指定は、変数を使えて便利ですよね！非常にお世話になっております。さらに変数に加えて関数（function）を使うと、ちょっとした色のバリエーションが簡単に指定できてしまいます。というわけで、Sassでサクッとカラーバリエーションを作る方法をまとめてみました。
あらかじめ「$変数名:色指定;」で、変数に色を格納します（1・2行目）。
同じ色を指定したい場合には、変数を指定すればOK（12・13行目）。後から「ちょっと色変えたい」という場合も、変数部分の１カ所を変えれば全ての色指定が変更されます。記述箇所の見落としがなくなるので、とても重宝しますね！もちろん、RGB指定でも 大丈夫です。
透明度をつける場合はrgba関数を使います。
書き方は、「rgba(色指定, 透明度)」です。色指定は変数も使えます。透明度も普通のCSSみたいに指定すればOKです。もちろん、透明度の部分を変数にしても問題ありません。
ほぼCSSと同じなので、間違えにくくていい感じですね！
彩度・明度は同じで、色相だけ変化させたい場合は、adjust-hue関数を。
「adjust-hue(色指定, 色相)」のように記述します。色相は角度（deg）で指定してください。ちなみに180degを指定すると、ちょうど補色ができます。
saturateは、色相・明度は同じままで、彩度を上げます。
記述は「saturate(色指定, 彩度を上げる量)」でOKです。彩度を上げる量は0%から100%で指定します。ちなみに彩度が上がりきってしまうと、それ以上は変化しませんので…。
彩度を下げる場合は、desaturateを使用します。
記述は「saturate(色指定, 彩度を下げる量)」。数値はsaturateと同じく0%〜100%の間で指定します。こちらも彩度が下がりきるとグレースケールになって、それ以上は変化しません。
色相・彩度を維持して明度を上げるにはlightenを使います。
記述は「lighten(色指定, 明度を上げる量)」です。後は大体saturateと同じです。明度を上げる量は0%〜100%で指定、明度が上がりきったら真っ白になります。
明度を下げる場合はdarkenです。
記述は大体予想がついていると思いますが、「darken(色指定, 明度を下げる量)」です。デジャヴ。同じく明度の下げ具合は0%〜100%の数値で指定します。明度が下がりきると真っ黒になります。
mix関数では、指定した色を混ぜ合わせることができます。
書き方としては、「mix(色その1, 色その2, 混ぜる度合い)」という感じ。混ぜ度合いは%で指定します。数値が小さいと2番目に記述した色が濃く、数値が大きいと最初に記述した色が濃くなるみたいです。
こうなると、もはやバリエーションというか違う色ですけどね…？2色間のグラデーションがキレイに作れるので、割と重宝しますよ！
基本カラーは決めたとしても、「ちょっと薄めの色が欲しい…」とか「シャドウの色が欲しい…」とかいう時って結構ありますよね！Sassの関数を使えば、いちいち色を作らなくても良いのがステキです。基本カラーが後から変わっても、変数を使っていれば…まるっと変わってくれる！ステキ！ 自分でコードが管理しやすいように、ガンガン使っていきたいと思いますー。
それではまた！
基本
Sassで色を扱う際は、変数を指定することが多いと思います。DEMO
box
html
|
1 2 3 |
<div class="demo_wrap"> <div>box</div> </div> |
Sass
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$text:#fff; $main_color:#32bd8c; div.demo_wrap{ margin:32px auto; >div{ width:64px; height:64px; margin:2px; display:inline-block; text-align:center; line-height:64px; background:$main_color; color:$text; } } |
バリエーションを作ろう
Sassのデフォルトfunction（関数）を使うと、あらかじめ決めたメインカラーを基にして、サクッと統制のとれたカラーバリエーションが作れます！- 透明度をつける : rgba
- 色相を変える : adjust-hue
- 彩度を上げる : saturate
- 彩度を下げる : desaturate
- 明度を上げる : lighten
- 明度を下げる : darken
- 色を混ぜる : mix
他にもグレースケールやら補色を作るやら色々あるみたいですが、自分的に使いどころが少なそうだったので割愛しました。詳しくはSassのDocumentationへどうぞ！
Module:Sass::Script::Functions-Sass Documentation
Module:Sass::Script::Functions-Sass Documentation
透明度をつける : rgba
DEMO
box1
box2
box3
box4
html
|
1 2 3 4 5 6 |
<div id="rgba" class="demo_wrap"> <div class="box1">box1</div> <div class="box2">box2</div> <div class="box3">box3</div> <div class="box4">box4</div> </div> |
Sass
|
1 2 3 4 5 6 |
#rgba{ div.box1{background:rgba($main_color,1);} div.box2{background:rgba($main_color,0.8);} div.box3{background:rgba($main_color,0.6);} div.box4{background:rgba($main_color,0.4);} } |
色相を変える : adjust-hue
DEMO
box1
box2
box3
box4
html
|
1 2 3 4 5 6 |
<div id="hue" class="demo_wrap"> <div class="box1">box1</div> <div class="box2">box2</div> <div class="box3">box3</div> <div class="box4">box4</div> </div> |
Sass
|
1 2 3 4 5 6 |
#hue{ div.box1{background:adjust-hue($main_color,0deg);} div.box2{background:adjust-hue($main_color,30deg);} div.box3{background:adjust-hue($main_color,60deg);} div.box4{background:adjust-hue($main_color,90deg);} } |
彩度を上げる : saturate
DEMO
box1
box2
box3
box4
html
|
1 2 3 4 5 6 |
<div id="saturate" class="demo_wrap"> <div class="box1">box1</div> <div class="box2">box2</div> <div class="box3">box3</div> <div class="box4">box4</div> </div> |
Sass
|
1 2 3 4 5 6 |
#saturate{ div.box1{background:saturate($main_color,0);} div.box2{background:saturate($main_color,15%);} div.box3{background:saturate($main_color,30%);} div.box4{background:saturate($main_color,45%);} } |
彩度を下げる : desaturate
DEMO
box1
box2
box3
box4
html
|
1 2 3 4 5 6 |
<div id="desaturate" class="demo_wrap"> <div class="box1">box1</div> <div class="box2">box2</div> <div class="box3">box3</div> <div class="box4">box4</div> </div> |
Sass
|
1 2 3 4 5 6 |
#desaturate{ div.box1{background:desaturate($main_color,0);} div.box2{background:desaturate($main_color,15%);} div.box3{background:desaturate($main_color,30%);} div.box4{background:desaturate($main_color,45%);} } |
明度を上げる : lighten
DEMO
box1
box2
box3
box4
html
|
1 2 3 4 5 6 |
<div id="lighten" class="demo_wrap"> <div class="box1">box1</div> <div class="box2">box2</div> <div class="box3">box3</div> <div class="box4">box4</div> </div> |
Sass
|
1 2 3 4 5 6 |
#lighten{ div.box1{background:lighten($main_color,0);} div.box2{background:lighten($main_color,15%);} div.box3{background:lighten($main_color,30%);} div.box4{background:lighten($main_color,45%);} } |
明度を下げる : darken
DEMO
box1
box2
box3
box4
html
|
1 2 3 4 5 6 |
<div id="darken" class="demo_wrap"> <div class="box1">box1</div> <div class="box2">box2</div> <div class="box3">box3</div> <div class="box4">box4</div> </div> |
Sass
|
1 2 3 4 5 6 |
#darken{ div.box1{background:darken($main_color,0);} div.box2{background:darken($main_color,15%);} div.box3{background:darken($main_color,30%);} div.box4{background:darken($main_color,45%);} } |
色を混ぜる : mix
DEMO
main
sub
mix20%
mix80%
html
|
1 2 3 4 5 6 |
<div id="mix" class="demo_wrap"> <div class="box1">main</div> <div class="box2">sub</div> <div class="box3">mix20%</div> <div class="box4">mix80%</div> </div> |
Sass
|
1 2 3 4 5 6 |
#mix{ div.box1{background:$main_color;} div.box2{background:$sub_color;} div.box3{background:mix($main_color,$sub_color,20%);} div.box4{background:mix($main_color,$sub_color,60%);} } |
まとめ
いかがだったでしょうか？基本カラーは決めたとしても、「ちょっと薄めの色が欲しい…」とか「シャドウの色が欲しい…」とかいう時って結構ありますよね！Sassの関数を使えば、いちいち色を作らなくても良いのがステキです。基本カラーが後から変わっても、変数を使っていれば…まるっと変わってくれる！ステキ！ 自分でコードが管理しやすいように、ガンガン使っていきたいと思いますー。
それではまた！