Sass 颜色函数

最后更新于：2022-03-27 02:40:24

Sass 颜色函数

Sass 颜色函数 Sass 函数

Sass 颜色函数可以分为三个部分：颜色设置、颜色获取以及颜色操作。

下表列出了 Sass 的颜色函数：

Sass 颜色设置

函数 描述 & 实例
rgb(red, green, blue) 创建一个 Red-Green-Blue (RGB) 色。其中 R 是 “red” 表示红色，而 G 是 “green” 绿色，B 是 “blue” 蓝色。

实例:
rgb(0, 0, 255);

rgba(red, green, blue, alpha) 根据红、绿、蓝和透明度值创建一个颜色。

实例:
rgba(0, 0, 255, 0.3);

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

实例:
hsl(120, 100%, 50%); // 绿色
hsl(120, 100%,
75%); // 浅绿色
hsl(120, 100%, 25%); // dark green
hsl(120, 60%,
70%); // 柔和的绿色
hsla(hue, saturation, lightness, alpha) 通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色。

实例:
hsl(120, 100%, 50%, 0.3); // 绿色带有透明度
hsl(120, 100%, 75%, 0.3); // 浅绿色带有透明度
grayscale(color) 将一个颜色变成灰色，相当于 desaturate( color,100%)。

实例:
grayscale(#7fffd4);
结果: #c6c6c6
complement(color) 返回一个补充色，相当于adjust-hue($color,180deg)。

实例:
complement(#7fffd4);
结果: #ff7faa
invert(color, weight) 返回一个反相色，红、绿、蓝色值倒过来，而透明度不变。

实例:
invert(white);
结果: black

Sass 颜色获取

函数 描述 & 实例
red(color) 从一个颜色中获取其中红色值（0-255）。

实例:
red(#7fffd4);
结果: 127
red(red);
结果:
255
green(color) 从一个颜色中获取其中绿色值（0-255）。

实例:
green(#7fffd4);
结果: 255
green(blue);
结果:
0
blue(color) 从一个颜色中获取其中蓝色值（0-255）。

实例:
blue(#7fffd4);
结果: 212
blue(blue);
结果: 255
hue(color) 返回颜色在 HSL 色值中的角度值 (0deg – 255deg)。

实例:
hue(#7fffd4);
结果: 160deg
saturation(color) 获取一个颜色的饱和度值(0% – 100%)。

实例:
saturation(#7fffd4);
结果: 100%
lightness(color) 获取一个颜色的亮度值(0% – 100%)。

实例:
lightness(#7fffd4);
结果: 74.9%
alpha(color) Returns the alpha channel of color as a number between 0 and 1.

实例:
alpha(#7fffd4);
结果: 1
opacity(color) 获取颜色透明度值(0-1)。

实例:
opacity(rgba(127, 255, 212, 0.5);
结果:
0.5

Sass 颜色操作

函数 描述 & 实例
mix(color1, color2, weight) 把两种颜色混合起来。
weight 参数必须是 0% 到 100%。默认 weight 为 50%，表明新颜色各取 50% color1 和 color2 的色值相加。如果 weight 为 25%，那表明新颜色为 25% color1 和 75% color2 的色值相加。
adjust-hue(color, degrees) 通过改变一个颜色的色相值（-360deg – 360deg），创建一个新的颜色。

实例:
adjust-hue(#7fffd4, 80deg);
结果: #8080ff
adjust-color(color, red, green, blue,
hue, saturation, lightness, alpha)		 这个函数能够调整给定色彩的一个或多个属性值，包括 RGB 和 HSL 色彩的各项色值参数，另外还有 alpha 通道的取值。这些属性值的调整依赖传入的关键值参数，通过这些参数再与给定颜色相应的色彩值做加减运算。

实例:
adjust-color(#7fffd4, blue: 25);
结果:
change-color(color, red, green, blue,
hue, saturation, lightness, alpha)		 跟上面 adjust-color 类似，只是在该函数中传入的参数将直接替换原来的值，而不做任何的运算。

实例:
change-color(#7fffd4, red: 255);
结果:
#ffffd4
scale-color(color, red, green, blue, 
saturation, lightness, alpha)		 另一种实用的颜色调节函数。adjust-color 通过传入的参数简单的与本身的色值参数做加减，有时候可能会导致累加值溢出，当然，函数会把结果控制在有效的阈值内。而 scale-color 函数则避免了这种情况，可以不必担心溢出，让参数在阈值范围内进行有效的调节。

举个例子，一个颜色的亮度 lightness 取值在 0% ~ 100% 之间，假如执行 scale-color($color, $lightness: 40%)，表明该颜色的亮度将有 (100 – 原始值) × 40% 的增幅。

另一个例子，执行 scale-color($color, $lightness: -40%)，表明这个颜色的亮度将减少 (原始值 – 0) × 40% 这么多的值。

所有传参的取值范围都在 0% ~ 100% 之间，并且 RGB 同 HSL 的传参不能冲突。

scale-color(hsl(120, 70%, 80%), $lightness: 50%) => hsl(120, 70%, 90%)
scale-color(rgb(200, 150, 170), $green: -40%, $blue: 70%) => rgb(200, 90, 229)
scale-color(hsl(200, 70%, 80%), $saturation: -90%, $alpha: -30%) => hsla(200, 7%, 80%, 0.7)
rgba(color, alpha) 根据红、绿、蓝和透明度值创建一个颜色。

实例:
rgba(#7fffd4, 30%);
结果:
rgba(127, 255, 212, 0.3)
lighten(color, amount) 通过改变颜色的亮度值（0% – 100%），让颜色变亮，创建一个新的颜色。
darken(color, amount) 通过改变颜色的亮度值（0% – 100%），让颜色变暗，创建一个新的颜色。
saturate(color, amount) 提高传入颜色的色彩饱和度。等同于 adjust-color( color, saturation: amount)
desaturate(color, amount) 调低一个颜色的饱和度后产生一个新的色值。同样，饱和度的取值区间在 0% ~ 100%。等同于 adjust-color(color, saturation: -amount)
opacify(color, amount) 降低颜色的透明度，取值在 0-1 之。等价于 adjust-color(color, alpha: amount)
fade-in(color, amount) 降低颜色的透明度，取值在 0-1 之。等价于 adjust-color(color, alpha: amount)
transparentize(color, amount) 提升颜色的透明度，取值在 0-1 之间。等价于 adjust-color(color, alpha: -amount)
fade-out(color, amount) 提升颜色的透明度，取值在 0-1 之间。等价于 adjust-color(color, alpha: -amount)

Sass 颜色函数 Sass 函数