sass笔记 - 实战中颜色的玩法总结

这篇文章是针对自己封装UI组件库的读者的，旨在为项目提供通用的颜色方案本文需要读者拥有CSS、SASS/SCSS相关基础知识。

jack lee 的 CSDN 博客

CSDN 主页：https://blog.csdn.net/qq_28550263?spm=1001.2101.3001.5343

邮箱 ：291148484@163.com

本文地址：https://blog.csdn.net/qq_28550263/article/details/123350343

相关文章推荐：

• Sass 内置函数总结
• sass 自定义函数
• sass 混入（mixin）

1. 定义颜色变量

CSS中已经提供了140 种颜色名称（参考附录一CSS颜色），可以直接作为颜色值。我们也可以自己定义和扩展用于SASS中的颜色变量：

// scss - 定义颜色变量$black:  #000000 !default;$navy:   #000080 !default;$darkblue:      #00008B !default;$mediumblue:    #0000CD !default;$blue:   #0000FF !default;$darkgreen:     #006400 !default;$green:  #008000 !default;$teal:   #008080 !default;$darkcyan:      #008B8B !default;$deepskyblue:   #00BFFF !default;$darkturquoise: #00CED1 !default;$mediumspringgreen:    #00FA9A !default;$lime:   #00FF00 !default;$springgreen:   #00FF7F !default;$aqua:   #00FFFF !default;$cyan:   #00FFFF !default;$midnightblue:  #191970 !default;$dodgerblue:    #1E90FF !default;$lightseagreen: #20B2AA !default;$forestgreen:   #228B22 !default;$seagreen:      #2E8B57 !default;$darkslategray: #2F4F4F !default;$limegreen:     #32CD32 !default;$mediumseagreen:#3CB371 !default;$turquoise:     #40E0D0 !default;$royalblue:     #4169E1 !default;$steelblue:     #4682B4 !default;$mediumturquoise:      #48D1CC !default;$darkslateblue: #483D8B !default;$indigo: #4B0082 !default;$darkolivegreen:#556B2F !default;$cadetblue:     #5F9EA0 !default;$cornflowerblue:#6495ED !default;$mediumaquamarine:     #66CDAA !default;$dimgray:#696969 !default;$slateblue:     #6A5ACD !default;$olivedrab:     #6B8E23 !default;$slategray:     #708090 !default;$lightslategray:#778899 !default;$mediumslateblue:      #7B68EE !default;$lawngreen:     #7CFC00 !default;$chartreuse:    #7FFF00 !default;$aquamarine:    #7FFFD4 !default;$maroon: #800000 !default;$purple: #800080 !default;$olive:  #808000 !default;$gray:   #808080 !default;$lightskyblue:  #87CEFA !default;$skyblue:#87CEEB !default;$blueviolet:    #8A2BE2 !default;$darkred:#8B0000 !default;$darkmagenta:   #8B008B !default;$saddlebrown:   #8B4513 !default;$darkseagreen:  #8FBC8F !default;$lightgreen:    #90EE90 !default;$mediumpurple:  #9370DB !default;$darkviolet:    #9400D3 !default;$palegreen:     #98FB98 !default;$darkorchid:    #9932CC !default;$yellowgreen:   #9ACD32 !default;$sienna: #A0522D !default;$brown:  #A52A2A !default;$darkgray:      #A9A9A9 !default;$lightblue:     #ADD8E6 !default;$greenyellow:   #ADFF2F !default;$paleturquoise: #AFEEEE !default;$lightsteelblue:#B0C4DE !default;$firebrick:     #B22222 !default;$darkgoldenrod: #B8860B !default;$mediumorchid:  #BA55D3 !default;$rosybrown:     #BC8F8F !default;$darkkhaki:     #BDB76B !default;$indianred:     #CD5C5C !default;$goldenrod:     #DAA520 !default;$palevioletred: #DB7093 !default;$crimson:#DC143C !default;$lavender:      #E6E6FA !default;$darksalmon:    #E9967A !default;$palegoldenrod: #EEE8AA !default;$lightcoral:    #F08080 !default;$aliceblue:     #F0F8FF !default;$honeydew:      #F0FFF0 !default;$wheat:  #F5DEB3 !default;$deeppink:      #FF1493 !default;$darkorange:    #FF8C00 !default;$gold:   #FFD700 !default;$peachpuff:     #FFDAB9 !default;$papayawhip:    #FFEFD5 !default;$powderblue:    #B0E0E6 !default;$chocolate:     #D2691E !default;$tan:    #D2B48C !default;$lightgray:     #D3D3D3 !default;$silver: #C0C0C0 !default;$mediumvioletred:      #C71585 !default;$fuchsia:#C83293 !default;$peru:   #CD853F !default;$thistle:#D8BFD8 !default;$orchid: #DA70D6 !default;$gainsboro:     #DCDCDC !default;$plum:   #DDA0DD !default;$burlywood:     #DEB887 !default;$lightcyan:     #E0FFFF !default;$violet: #EE82EE !default;$khaki:  #F0E68C !default;$azure:  #F0FFFF !default;$beige:  #F5F5DC !default;$whitesmoke:    #F5F5F5 !default;$mintcream:     #F5FFFA !default;$ghostwhite:    #F8F8FF !default;$salmon: #FA8072 !default;$sandybrown:    #FAA460 !default;$antiquewhite:  #FAEBD7 !default;$linen:  #FAF0E6 !default;$lightgoldenrodyellow: #FAFAD2 !default;$oldlace:#FDF5E6 !default;$red:    #FF0000 !default;$magenta:#FF00FF !default;$orangered:     #FF4500 !default;$tomato: #FF6347 !default;$hotpink:#FF69B4 !default;$coral:  #FF7F50 !default;$lightsalmon:   #FFA07A !default;$orange: #FFA500 !default;$lightpink:     #FFB6C1 !default;$pink:   #FFC0CB !default;$navajowhite:   #FFDEAD !default;$moccasin:      #FFE4B5 !default;$bisque: #FFE4C4 !default;$mistyrose:     #FFE4E1 !default;$blanchedalmond:#FFEBCD !default;$lavenderblush: #FFF0F5 !default;$seashell:      #FFF5EE !default;$cornsilk:      #FFF8DC !default;$lemonchiffon:  #FFFACD !default;$floralwhite:   #FFFAF0 !default;$snow:   #FFFAFA !default;$yellow: #FFFF00 !default;$lightyellow:   #FFFFE0 !default;$ivory:  #FFFFF0 !default;$white:  #FFFFFF !default;

2. Sass 颜色相关函数

2.1 Sass 颜色设置

2.1.1 rgb(red, green, blue)

创建一个 Red-Green-Blue (RGB) 色。其中 R 是 “red” 表示红色，而 G 是 “green” 绿色，B 是 “blue” 蓝色。例如：

rgb(0, 0, 255);

2.1.2 rgba(red, green, blue, alpha)

根据红、绿、蓝和透明度值创建一个颜色。
例如：

rgba(0, 0, 255, 0.3);

2.1.3 hsl(hue, saturation, lightness)

通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色，例如：

hsl(120, 100%, 50%); // 绿色hsl(120, 100%, 75%); // 浅绿色hsl(120, 100%, 25%); // dark greenhsl(120, 60%, 70%); // 柔和的绿色

再入scss：

p {  color: hsl($hue: 0, $saturation: 100%, $lightness: 50%); // 这里使用了 “关键词参数”}

编译成的CSS为：

p {  color: red; }/*# sourceMappingURL=test.css.map */

2.1.4 hsla(hue, saturation, lightness, alpha)

通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色。例如：

hsl(120, 100%, 50%, 0.3); // 绿色带有透明度hsl(120, 100%, 75%, 0.3); // 浅绿色带有透明度

2.1.5 grayscale(color)

将一个颜色变成灰色，相当于 desaturate( color,100%)。例如：

grayscale(#7fffd4)     // #c6c6c6

2.1.6 complement(color)

返回一个补充色，相当于adjust-hue($color,180deg)。例如：

complement(#7fffd4)   // #ff7faa

2.1.7 invert(color, weight)

返回一个反相色，红、绿、蓝色值倒过来，而透明度不变。例如：

invert(white) // black

2.2 Sass 颜色获取

2.2.1 red(color)

从一个颜色中获取其中红色值（0-255），例如SASS/SCSS：

red(#c7793e)  / 199 */

2.2.2 green(color)

从一个颜色中获取其中绿色值（0-255），例如SASS/SCSS：

green(#8c9918) / 153 */

2.2.3 blue(color)

从一个颜色中获取其中蓝色值（0-255），例如SASS/SCSS：

blue(#007fd3)  / 211 */

2.2.4 hue(color)

返回颜色在 HSL 色值中的角度值 (0deg - 255deg)，例如SASS/SCSS：

hue(#7544c4)   / 262.96875deg */

【注】
HSL 色彩模式通过对 色相 (H)、饱和度(Saturation)、亮度(Lightness)三个颜色通道 的变化以及它们相互之间的叠加来得到各式各样的颜色的，HSL即是代表色相，饱和度，亮度三个通道的颜色。

2.2.5 saturation(color)

获取一个颜色的饱和度值(0% - 100%)，例如SASS/SCSS：

saturation(#736191)      / 19.8347107438% */

2.2.6 lightness(color)

获取一个颜色的亮度值(0% - 100%)，例如SASS/SCSS：

lightness(#ab98c9)      / 69.2156862745% */

2.2.7 alpha(color)

以0到1之间的数字返回 color 的 alpha 通道，例如SASS/SCSS：

alpha(rgba(#73d09a, .6))/ 0.6 */alpha(rgba(189, 174, 38, 0.8)) / 0.8 */

【注】 阿尔法通道（α Channel或Alpha Channel）是指一张图片的 透明 和 半透明度。

---

例如 ：

• 一个使用16位存储的图片，可能5位表示红色，5位表示绿色，5位表示蓝色，1位是阿尔法。 在这种情况下，它要么表示透明要么不是。
• 一个使用32位存储的图片，每8位表示红绿蓝，和阿尔法通道。在这种情况下，就不光可以表示透明还是不透明，阿尔法通道还可以表示256级的半透明度。

  来源：【百度百科：alpha通道】

2.2.8 opacity(color)

获取颜色透明度值(0-1)，例如SASS/SCSS：

alpha(rgba(blue, .7))   / 0.7 */alpha(rgba(blue))/ 0 */

2.3 Sass 颜色操作

2.3.1 mix(color1, color2, weight)

把两种颜色混合起来。参数必须是 0% 到 100%。默认 weight 为 50%，表明新颜色各取 50% color1 和 color2 的色值相加。
如果 weight 为 25%，那表明新颜色为 25% color1 和 75% color2 的色值相加。

例如：

// 给一种颜色上色: 将一种颜色与白色混合@function tint-color($color, $weight) {  @return mix(white, $color, $weight);}// 给颜色加阴影:将一种颜色与黑色混合@function shade-color($color, $weight) {  @return mix(black, $color, $weight);}

2.3.2 adjust-hue(color, degrees)

通过改变一个颜色的色相值（-360deg - 360deg），创建一个新的颜色。例如：

adjust-hue(#7fffd4, 80deg)  // #8080ff

2.3.3 adjust-color(color, red, green, blue, hue, saturation, lightness, alpha)

这个函数能够调整给定色彩的一个或多个属性值，包括 RGB 和 HSL 色彩的各项色值参数，另外还有 alpha 通道的取值。这些属性值的调整依赖传入的关键值参数，通过这些参数再与给定颜色相应的色彩值做加减运算。
例如：

adjust-color(#6b717f, $red: 15)// #7a717f

2.3.4 change-color(color, red, green, blue, hue, saturation, lightness, alpha)

跟上面 adjust-color 类似，只是在该函数中传入的参数将直接替换原来的值，而不做任何的运算。例如：

change-color(#7fffd4, red: 255) // #ffffd4

2.3.5 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)

2.3.6 desaturate(color, amount)

降低 一个颜色的饱和度后产生一个新的色值。同样，饱和度的取值区间在 0% ~ 100%。等同于 adjust-color(color, saturation: -amount)。

desaturate(#965f34, 20%)    / #826148 */

2.3.7 opacify(color, amount)

降低颜色的透明度，取值在 0-1 之。等价于 adjust-color(color, alpha: amount)

opacify(rgba(10, 197, 0, 0.6), .1)/ rgba(10, 197, 0, 0.7) */opacify(rgba(10, 197, 0), .1)     /  Error: wrong number of arguments (3 for 4) for `rgba' */    opacify(#cdcdcd, .1)   / 无改变：#cdcdcd */  opacify(red, .1)/ 无改变：red */ 

2.3.8 fade-in(color, amount)

降低 颜色的 透明度，取值在 0-1 之。等价于 adjust-color(color, alpha: amount)

2.3.9 transparentize(color, amount)

提升 颜色的 透明度 ，取值在 0-1 之间。等价于 adjust-color(color, alpha: -amount)

2.3.10 fade-out(color, amount)

提升 颜色的 透明度 ，取值在 0-1 之间。等价于 adjust-color(color, alpha: -amount)

3. 混合颜色

/ 用一个颜色着色: 将一个颜色与白色混合 */@function tint-color($color, $weight) {  @return mix(white, $color, $weight);}/ 用一个颜色描影（Shade）: 将一个颜色与灰色混合 */@function shade-color($color, $weight) {  @return mix(black, $color, $weight);}

用JavaScript / TypeScript 实现：

// element UI中使用就是这个方法export function calcColorChannels(c: string) {  // 从字符串中移除前导空格和尾随空格以及行终止符，在将#号去掉，得到纯十六进制数字颜色值  let rawColor = c.trim().replace('#', '')  if (/^[0-9a-fA-F]{3}$/.test(rawColor)) {    rawColor =      rawColor[0].repeat(2) + rawColor[1].repeat(2) + rawColor[2].repeat(2)  }  if (/^[0-9a-fA-F]{6}$/.test(rawColor)) {    return {      red: parseInt(rawColor.slice(0, 2), 16),      green: parseInt(rawColor.slice(2, 4), 16),      blue: parseInt(rawColor.slice(4, 6), 16),    }  }  return {    red: 255,    green: 255,    blue: 255,  }}export function mixColor(color: string, percent = 0.2) {  let { red, green, blue } = calcColorChannels(color)  if (percent > 0) {    / 颜色加黑 */    red *= 1 - percent    green *= 1 - percent    blue *= 1 - percent  } else {    / 颜色加量 */    const value = Math.abs(percent)    red += (255 - red) * Math.abs(percent)    green += (255 - green) * value    blue += (255 - blue) * value  }  return `rgb(${Math.round(red)}, ${Math.round(green)}, ${Math.round(blue)})`}/颜色加亮 20%（混合白色） tint color */export function lighten(color: string, percent = 0.2) {  return mixColor(color, -percent)}/颜色加黑 20%（混合黑色） shade color */export function darken(color: string, percent = 0.2) {  return mixColor(color, percent)}

附录1：CSS内置颜色名

附录2：第1节中定义的SCSS颜色变量颜色值对照表

茶叶商城