sass 颜色函数

rgb($red,$green,$blue)：根据红、绿、蓝三个值创建一个颜色；
rgba($red,$green,$blue,$alpha)：根据红、绿、蓝和透明度值创建一个颜色；
red($color)：从一个颜色中获取其中红色值；
green($color)：从一个颜色中获取其中绿色值；
blue($color)：从一个颜色中获取其中蓝色值；
mix($color-1,$color-2,[$weight])：把两种颜色混合在一起。

.rgba {

color: rgba(255, 51, 102, 0.5);

background: rgba(255, 165, 0, 0.5);

border-color: rgba(0, 128, 0, 0.5);
}

hsl($hue,$saturation,$lightness)：通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色；
hsla($hue,$saturation,$lightness,$alpha)：通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色；
hue($color)：从一个颜色中获取色相（hue）值；
saturation($color)：从一个颜色中获取饱和度（saturation）值；
lightness($color)：从一个颜色中获取亮度（lightness）值；
adjust-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)：反回一个反相色，红、绿、蓝色值倒过来，而透明度不变

使用 lighten() 和 darken() 函数来修改 10% 的亮度值：
//SCSS

.lighten {

background: lighten($baseColor,10%);

}

.darken{

background: darken($baseColor,10%);
}

在 CSS 中除了可以使用 rgba、hsla 和 transform 来控制颜色透明度之外，还可以使用 opacity 来控制，只不过前两者只是针对颜色上的透明通道做处理，而后者是控制整个元素的透明度。

Opacity函数-alpha()、opacity()函数

alphpa() 和 opacity() 函数很简单，与前面介绍的 red(),green() 等函数很类似。这个函数的主要功能是用来获取一个颜色的透明度值。如果颜色没有特别指定透明度，那么这两个函数得到的值都会是
1：

在前面介绍 RGB 函数一节中，还记得吗？有一个 rgba() 函数可以创建一个颜色，同时还可以对颜色修改其透明度。其可以接受两个参数，第一个参数为颜色，第二个参数是你需要设置的颜色透明值。

>> rgba(red,.5)

rgba(255, 0, 0, 0.5)

>> rgba(#dedede,.5)
rgba(222, 222, 222, 0.5)

Opacity函数-opacify()、fade-in()函数

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

rgba(22, 34, 235, 0.8)

>> opacify(rgba(22,34,235,.6),.5)

#1622eb

>> opacify(hsla(22,34%,23%,.6),.15)

rgba(79, 53, 39, 0.75)

>> opacify(hsla(22,34%,23%,.6),.415)

#4f3527

>> opacify(red,.15)
#ff0000

Opacity函数-transparentize()、 fade-out()函数

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

>> transparentize(red,.5)

rgba(255, 0, 0, 0.5)

>> transparentize(#fde,.9)

rgba(255, 221, 238, 0.1)

>> transparentize(rgba(98,233,124,.3),.11)

rgba(98, 233, 124, 0.19)

>> transparentize(rgba(98,233,124,.3),.51)

rgba(98, 233, 124, 0)

>> fade-out(red,.9)

rgba(255, 0, 0, 0.1)

>> fade-out(hsla(98,6%,23%,.5),.1)

rgba(58, 62, 55, 0.4)

>> fade-out(hsla(98,6%,23%,.5),.6)

rgba(58, 62, 55, 0)