【CSS】11 个 Sass 中常用的颜色函数，你需要知道一下

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，否则会失效。

2、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 {  background: rgba(0, 0, 0, 0.6);  color: black;}

大家可以自己试一下，当设置不同的透明度值时，会有什么效果。一般我们在制作网页时，会给一些背景颜色设置透明度。

3、hsl()函数

hsl() 函数可以通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色。

示例：

.xkd{    color: hsl(100, 100%, 60%);    a{        color: hsl(255, 80%, 70%);    }}

编译成 CSS 代码：

.xkd {  color: #77ff33;}.xkd a {  color: #9475f0;}

4、hsla()函数

hsla() 函数可以通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色。

示例：

.xkd{    color: hsla(100, 100%, 60%, 0.8);    a{        color: hsla(255, 80%, 70%, 0.3);    }}

编译成 CSS 代码：

.xkd {  color: rgba(119, 255, 51, 0.8);}.xkd a {  color: rgba(148, 117, 240, 0.3);}

5、red()函数

red() 函数用于从一个颜色中获取其中红色值，取值范围为 0 到 255。除了 red() 函数，还有 green() 函数和 blue() 函数。

示例：

例如获取一个颜色中的红色值、绿色值、蓝色值：

.xkd{    content: red(#fecefc);    content: green(#fecefc);    content: blue(#fecefc);}

编译成 CSS 代码：

.xkd {  content: 254;  content: 206;  content: 252;}

上述代码中，red() 函数用于从一个颜色中获取红色值，同理，green() 函数用于获取绿色值，blue() 函数用于获取蓝色值。

我们可以试一下在 rgb() 函数中使用这三个获取到的数值，看看创建的颜色是否同 #fecefc 一样：

rgb(254, 206, 252)

6、lightness()函数

lightness() 函数获取一个颜色的亮度值，取值范围为0% 到 100%。

示例：

例如获取不同颜色值的亮度：

.xkd{    content:lightness(#cccccc);    content:lightness(#ff0000);}

编译成 CSS 代码：

.xkd {  content: 80%;  content: 50%;}

根据输出结果可以看出，#cccccc 颜色的亮度为 80%，#ff0000 的亮度为 50% 。

7、alpha()函数

alpha() 函数将颜色的 alpha 通道返回为介于 0 和 1 之间的数字。

示例：

.xkd{    content:alpha(pink);    content:alpha(rgba(125, 125, 125, 0.6));}

编译成 CSS 代码：

.xkd {  content: 1;  content: 0.6;}

8、opacity()函数

opacity() 函数用于获取颜色透明度值，取值范围在 0 到 1 之间。

示例：

.xkd{    content:opacity(rgba(212, 234, 124, 0.1));    content: opacity(red);}

编译成 CSS 代码：

.xkd {  content: 0.1;  content: 1;}

9、mix()函数

mix() 函数用于将两种颜色混合起来，可以组成一个新的颜色值。

示例：

例如我们将蓝色和绿色混合起来：

.xkd{    content:mix(blue, green);}

编译成 CSS 代码：

.xkd {  content: #004080;}

编译后，组成了一个新的颜色 #004080。

10、fade-in()函数

fade-in() 函数降低颜色的透明度，取值在 0 到 1 之间。

示例：

.xkd{    content:fade-in(rgba(100, 100, 255, 0.7), 0.1);}

编译成 CSS 代码：

.xkd {  content: rgba(100, 100, 255, 0.8);}

可以看到，编译后的代码中，透明度由原来的 0.7 变为了 0.8。因为值越小透明度越高，反之值越大，透明度越低。

11、fade-out()函数

fade-out() 函数提升颜色的透明度，取值在 0 到 1 之间。

示例：

.xkd{    content:fade-out(rgba(100, 100, 255, 0.7), 0.1);}

编译成 CSS 代码：

.xkd {  content: rgba(100, 100, 255, 0.6);}

上述代码中，透明度由 0.7 提升到 0.6，值越小越透明。