本节我们来看一下 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 {
background: rgba(0, 0, 0, 0.6);
color: black;
}
大家可以自己试一下,当设置不同的透明度值时,会有什么效果。一般我们在制作网页时,会给一些背景颜色设置透明度。
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;
}
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);
}
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)
lightness()函数
lightness()
函数获取一个颜色的亮度值,取值范围为0% 到 100%。
示例:
例如获取不同颜色值的亮度:
.xkd{
content:lightness(#cccccc);
content:lightness(#ff0000);
}
编译成 CSS 代码:
.xkd {
content: 80%;
content: 50%;
}
根据输出结果可以看出,#cccccc
颜色的亮度为 80%
,#ff0000
的亮度为 50%
。
alpha()函数
alpha()
函数将颜色的 alpha
通道返回为介于 0 和 1 之间的数字。
示例:
.xkd{
content:alpha(pink);
content:alpha(rgba(125, 125, 125, 0.6));
}
编译成 CSS 代码:
.xkd {
content: 1;
content: 0.6;
}
opacity()函数
opacity()
函数用于获取颜色透明度值,取值范围在 0 到 1 之间。
示例:
.xkd{
content:opacity(rgba(212, 234, 124, 0.1));
content: opacity(red);
}
编译成 CSS 代码:
.xkd {
content: 0.1;
content: 1;
}
mix()函数
mix()
函数用于将两种颜色混合起来,可以组成一个新的颜色值。
示例:
例如我们将蓝色和绿色混合起来:
.xkd{
content:mix(blue, green);
}
编译成 CSS 代码:
.xkd {
content: #004080;
}
编译后,组成了一个新的颜色 #004080
。
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
。因为值越小透明度越高,反之值越大,透明度越低。
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
,值越小越透明。