Sass 颜色函数

本节我们来看一下 Sass 中的颜色函数，颜色函数可以分为三部分，分别是颜色设置、颜色获取以及颜色操作。Sass 中的颜色函数有很多，下面我们来看一些 Sass 中常用的颜色函数：

函数	描述
rgb()	创建一个 Red-Green-Blue（RGB） 色
rgba()	创建一个带有透明度值的颜色
hsl()	通过色相、饱和度和亮度的值创建一个颜色
hsla()	通过色相、饱和度、亮度和透明的值创建一个颜色
red()	从一个颜色中获取其中红色值
lightness	获取一个颜色的亮度值(0% - 100%)
alpha	将颜色的 alpha 通道返回为介于 0 和 1 之间的数字
opacity	获取颜色透明度值(0-1)
mix()	把两种颜色混合起来
fade-in()	降低颜色的透明度，取值在 0-1 之。
fade-out()	提升颜色的透明度，取值在 0-1 之间。

rgb()函数

rgb() 函数创建一个 Red-Green-Blue（RGB） 色，其中 R 表示红色，G表示绿色，B表示蓝色。RGB的取值范围在 0 到 255 之间。

示例：

这个函数我们应该比较熟悉了，在 CSS 中设置颜色值也会用到这个函数：

.xkd{
    background: rgb(240, 236, 122);
    color: rgb(15, 88, 96);
}

编译成 CSS 代码：

.xkd {
   
  background: #f0ec7a;
  color: #0f5860;
}

需要注意的是 rgb() 函数中的参数值范围在 0 到 255 之前，不能超过 255，否则会失效。

rbga()函数

rbga() 函数的使用和 rgb() 函数差不多，都是用于创建颜色，但是 rgba() 中多了一个 alpha，也就是颜色透明度。颜色透明度的取值范围为 0 到 1 之间的小数，例如 0.1、0.2 0.3 等， 值越小颜色越透明。

示例：

例如我们给一个黑色设置透明度为 0.6：

.xkd{
    background: rgba(0, 0, 0, 0.6);
    color: rgb(0, 0, 0);
}

编译成 CSS 代码：

.xkd