Sass中颜色函数主要分为RGB、HSL和Opacity三大函数。

RGB颜色函数

• [ ] rgb($red,$green, $blue)将RGB颜色转换成十六进制颜色
• [ ] rgba($color,$alpha)将十六进制颜色和透明度值转换成RGBA颜色
• [ ] red($color):从一个十六进制的颜色中获取其中的红色
• [ ] green($color):从一个十六进制的颜色中获取其中绿红色
• [ ] blue($color):从一个十六进制的颜色中获取其中的蓝色
• [ ] mix($color1,$color2, [weight]):将两种颜色混合成一种颜色

打开CMD，输入sass -i(已安装sass环境)，开启sass的函数计算。

>> rgb(20,10,20)

140a14

>>rgba(#140a14,0.5)

rgb(20,10,20，0.5)

>>red(#140a14)

20

>>green(#140a14)

20

>>blue(#140a14)

20

rgba($color,$alpha)将一个Hex颜色转换为rgba颜色

假设在实际中知道的颜色值是 #f36 或者 red，但在使用中，需要给他们配上一个透明度，这个时候在原来的 CSS 中，首先需要通过制图工具，得到 #f36 或 red 颜色的 R、G、B 值，而不能直接使用（注意 css3 是可以的，但是存在浏览器兼容问题）

比如，我们在Sass中已经定义了颜色，此时需要给它们加上一个透明度。

$gobalColor: (
  default: red,
  hover: green
);
div{
  color: rgba(map-get($gobalColor, default), 0.5);
  background-color: rgba(map-get($gobalColor, hover), 0.5);
}

编译出来的CSS为：

div {
  color: rgba(255, 0, 0, 0.5);
  background-color: rgba(0, 128, 0, 0.5);
}

注意，$gobalColor括号后面必须加上分号。

Mix($color1,$color2, [weight])函数

$color1 和$color2 指的是需要合并的颜色，颜色可以是表达式，也可以是颜色变量。
weight是合并的比例，默认值为50%，取值范围在0-1之间。指定的值时第一个颜色所占的比重，第二个颜色占的比重为 1-weight

$gobalColor: (
  default: red,
  hover: green
);
div{
  color: mix(map-get($gobalColor, default), map-get($gobalColor, hover), 0.3);
}
span{
  color: mix(red, green, 0.3)
}

编译出来的CSS为：

div {
  color: #018000;
}

span {
  color: #018000;
}

HSL函数简介

HSL用色轮表示颜色值。Sass中提供了一系列关于HSL的颜色函数。

• [ ] hsl($hue,$saturation, $lightness): 根据色相、饱和度和亮度的值返回对应的HEX颜色
• [ ] hsla($hue,$saturation, $lightness,$alpha): 根据色相、饱和度、亮度和透明度的值返回对应的HEX颜色
• [ ] hue($color)：从HEX颜色值中取得色相值
• [ ] saturation($color): 从一个HEX颜色值中取得饱和度值
• [ ] lightness($color):从一个HEX颜色值中取得亮度值
• [ ] ajust-hue($color,$degrees):通过改变一个颜色的色相值，创建一个新的颜色
• [ ] lighten($color,$amount)：通过改变颜色的亮度值，让颜色变亮，创建一个一个新的颜色
• [ ] darken($color,$amount):通过改变颜色的亮度值，让颜色变暗，创建一个一个新的颜色
• [ ] saturate($color,$amount):通过改变颜色的饱和度值，让颜色更饱和，从而创建一个新的颜色
• [ ] desaturate($color,$amount)：通过改变颜色的饱和度值，让颜色更少的饱和，从而创建出一个新的颜色
• [ ] grayscale($color)：将一个颜色变成灰色，相当于desaturate($color,100%);
• [ ] complement($color)：返回一个补充色，相当于adjust-hue($color,180deg);
• [ ] invert($color)：反回一个反相色，红、绿、蓝色值倒过来，而透明度不变

HSL色调饱和度亮度模式。
H色相 0~360圆环形式，以角度表示
S饱和度 0~1之间的小数
L亮度 0~1之间的小数

打开CMD，输入sass -i开启sass的计算功能。

>>hsl(200,0.2,0.5)

010101

>>hsla(200,0.2,0.5,0.4)

rgba(1,1,1,0.4)

>>hue(#cbc)

300deg

>>saturation(#cbc)

14.28571%

>>lightness(#cbc)

76.66667%

>>ajust-hue(#cbc, 150)

c4ccbb

>>lighten(#cbc, 0.5)

cdbccd

>>darken(#cbc, 0.8)

cab9ca

>>saturate(#cbc, 0.9)

cdbacd

>>desaturate(#cbc, 0.9)

cbbccb

>>grayscale(#cbc)

c4c4c4

>>complement(#cbc)

bbccbb

>>invert(#cbc)

334433

HSL 函数中最常见的是 lighten()、darken()、saturate()、desaturate()、grayscale()、complement()和 invert() 几个函数。

lighten($color,$amount)和darken($color,$amount)函数

lighten($color,$amount)和darken($color,$amount)都是调整颜色的亮度值，lighten()让颜色变得更亮，darken()让颜色变得更暗。$amount的范围在0~1之间，不过常用的一般是3%~20%之间。

$defaultColor: #C53FB1;
.lighten {
    background: lighten($baseColor,10%);
}
.darken{
    background: darken($baseColor,10%);
}

编译出来的CSS为:

.lighten {
  background: #d166c1;
}

.darken {
  background: #a13090;
}

可以通过lightness($color)来查看各个颜色的亮度值。

>>lightness(#c53FB1)

50.98039%

>>lightness(#d166c1)

60.98039%

>>lightness(#a13090)

40.98039%

saturate($color,$amount)和desaturate($color,$amount)调整颜色的饱和度

改变颜色的饱和度和改变颜色的亮度是一个道理。

需要注意的是，当颜色的饱和度为1时，是没法再提高饱和度的，而颜色的饱和度为0时，无法降低饱和度。

亮度也是同样的道理。

adjust-hue($color,$degrees):改变一个颜色的色相值

$degrees可以是-360到+360之间的一个数值。也可以是百分数。

$bgcolor: #FF7E1B;

.btn{
    background-color: $bgcolor;
    border-color: adjust-hue($bgcolor, 40);
}

编译出来的CSS为:

.btn {
  background-color: #FF7E1B;
  border-color: #e8ff1b;
}

当色相值大于360deg时，就减去360(这一点，与圆的角度的道理相同)

grayscale($color)函数:将一个颜色变成灰色

grayscale($color)会将颜色的饱和度直接调至0，和desaturate($color, 100%)所起的功能是一样的。

$defaultColor: #BE1BFF;
div{
    color: grayscale($defaultColor);
    background-color: desaturate($defaultColor, 100%);
}

编译出来的CSS为:

div {
  color: #8d8d8d;
  background-color: #8d8d8d;
}

用saturation(#8d8d8d)查看饱和度，可以发现饱和度是0。

Opacity函数简介

opacity控制颜色的透明度。在Sass中也提供了一系列透明函数来处理颜色透明度

• [ ] alpha($color)/opacity($color):获得透明度值
• [ ] rgba($color,$alpha)：改变颜色的透明度值
• [ ] opacify($color,$amount)/fade-in($color,$amount):使颜色更不透明
• [ ] transparentize($color,$amount)/fade-out($color,$amount):使颜色更加透明

alpha和opacity

>> alpha(blue)

1

>> alpha(rgba(blue,.5))

0.5

>> opacity(red)

1

>> opacity(rgba(red,.5))

0.5

opacity属性时css中专门用来指定透明度的一个属性，取值范围也在0-1之间，0表示完全透明，1表示不透明。使用alpha通道对元素设定透明度时，可以单独针对元素的背景色和文字颜色等来指定透明度，而opacity属性只能指定整个元素的透明度。

opacify($color,$amount)和fade-in($color,$amount)函数

用来对已有颜色的透明度做一个加法运算，会让颜色更加不透明。其接受两个参数，第一个参数是原始颜色，第二个参数是你需要增加的透明度值，其取值范围主要是在 0~1 之间。当透明度值增加到大于 1 时，会以 1 计算，表示颜色不具有任何透明度。

>>opacify(rgba(red,0.5),0.2)

rgba(255,0,0,0.7)

>>fade-in(rgba(red,0.5),0.3)

rgba(255,0,0,0.8)

>>fade-in(rgb(red,0.6),0.5)

FF0000

透明度的加法运算

当不透明度的值加起来超过1时，fade-in和opacify都返回一个HEX颜色值。

transparentize($color,$amount)和fade-out($color,$amount)函数

transparentize() 和 fade-out() 函数所起作用刚好与 opacify() 和 fade-in() 函数相反，让颜色更加的透明。这两个函数会让透明值做减法运算，当计算出来的结果小于 0 时会以 0 计算，表示全透明。

>>opacify(rgba(red,0.5),0.2)

rgba(255,0,0,0.3)

>>fade-in(rgba(red,0.5),0.3)

rgba(255,0,0,0.2)

>>fade-in(rgb(red,0.4),0.5)

rgba(255,0,0,0)

透明度的减法运算