Sass 颜色操作

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(lightness: 40%)，表明该颜色的亮度将有 (100 - 原始值) × 40% 的增幅。

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

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

scale-color(hsl(120, 70%, 80%), green: -40%, 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)