Sassの関数-[カラーコード操作]

css scss sass


rgba()

RGBaプロパティはRGB各色に0~255の数値で指定して、最後に透明度を0~1で指定します。
このRGBの値は#FFFFFFのような16進数表記を使用するとエラーが起きます。
Sassではrgba()を使用することで
16進数表記を自動的にRGB各色に0~255の値を換算してくれます。


ロールオーバーや透明感のあるデザインを使うときに重宝します。

sass

body{
background: rgba(#8AA5E5,0.5);
}



css(コンパイル後)

body {
  background: rgba(138, 165, 229, 0.5);
}


実際の色の変化


background: rgba(#8AA5E5,0.5);
→
background: rgba(138, 165, 229, 0.5);

左側のボックスは"opacity:0.5"をかけているので、文字が薄くなっています。



mix()

２つのカラーコードの中間色を作れる。
sass

$black : #000;
$white : #FFF;

section_a{
background: mix($black,$white,50%);
}

section_b{
background: mix($black,$white,70%);
}



css(コンパイル後)

section_a {
  background: #7f7f7f;
}

section_b {
  background: #4c4c4c;
}



section_a(50%の場合)


background: #000;
+
background: #FFF;
＝
background: #7f7f7f;


section_b(70%の場合)

background: #000;
+
background: #FFF;
＝
background: #4c4c4c;


上記のように第１引数=黒、第２引数=白、ときて
第３引数の割合で50％だと丁度、中間色の灰色。
70％で黒よりのグレーになりました。


このことから第3引数の割合で第1引数の色に近づくことを意味しています。

lighten()とdarken()

明度調整ができるのが
明るくするlighten()と
暗くするdarken()です。
sass

$white : #FFF;
$blak : #000;

section.glay70{
	background: lighten($blak,30%);
}

section.glay30{
	background: darken($white,30%);
}



css(コンパイル後)

section.glay70 {
  background: #4d4d4d;
}

section.glay30 {
  background: #b3b3b3;
}



30%明るくした結果


background: #000;
ｘ
30%明るく

＝
background: #4d4d4d;


30%暗くした結果


background: #FFF;
ｘ
30%暗く

＝
background: #b3b3b3;