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%)
複製代碼