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) |
点我分享笔记