Scss系列之--lighten & darken vs scale-color vs mix()

lighten & darken vs scale-color vs mix()

这几个函数都是跟颜色有关，来调节颜色的明暗程度。但是我们真的理解他们的作用原理么？

1.lighten & darken：

它们的工作原理是将颜色转换成hsl格式，我们知道l代表的是明暗程度，假如我们有一个颜色#036， 转成HSL是hsl(210,100,21)。我们看到hsl中的l也就是亮度只有21,如果我们使用lighten或者darken。就是直接加减这个l的值，如果darken(#036,21) 会变成hsl(210,100,0)纯黑的一个颜色。并不是我们想要的按照百分比去降低亮度。

2.scale-color

如果想要按照百分比降低亮度，需要通过scale-color

scale-color(#036, $lightness: -20%) 
// 编译后
hsl(210, 100, 16%)
复制代码

3. mix

通过mix跟黑白颜色混合也可以达到调节亮度的作用，不过mix可以混合任意颜色，不一定是黑白。 $weight代表的是第一种颜色的使用比重。

mix($color1, $color2, $weight: 50%)
复制代码

转载于:https://juejin.im/post/5cdb8202f265da036207cc99