Sass 颜色函数
Sass 颜色函数
Sass 颜色函数可以分为三个部分:颜色设置、颜色获取以及颜色操作。
下表列出了 Sass 的颜色函数:
| 函数 | 描述 & 实例 |
|---|---|
| rgb(red, green, blue) | 创建一个 Red-Green-Blue (RGB) 色。其中 R 是 "red" 表示红色，而 G 是 "green" 绿色，B 是 "blue" 蓝色。 实例: rgb(0, 0, 255); // 呈现为蓝色，因为蓝色参数设置为最高值 (255)，其他设置为 0 |
| 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%); // 深绿色 hsl(120, 60%, 70%); // 柔和的绿色 |
| hsla(hue, saturation, lightness, alpha) | 通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色。 实例: hsl(120, 100%, 50%, 0.3); // green with opacity 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) | 将颜色的 Alpha 通道返回为 0 到 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) |
