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%)
复制代码