lighten() 和 darken() 兩個(gè)函數(shù)都是圍繞顏色的亮度值做調(diào)整的，其中 lighten() 函數(shù)會(huì)讓顏色變得更亮，與之相反的 darken() 函數(shù)會(huì)讓顏色變得更暗。這個(gè)亮度值可以是 0~1 之間，不過常用的一般都在 3%~20% 之間。

來看一個(gè)簡單的實(shí)例，首先定義一個(gè)顏色變量：

$baseColor: #ad141e;

使用 lighten() 和 darken() 函數(shù)來修改 10% 的亮度值：

//SCSS
.lighten {
    background: lighten($baseColor,10%);
}
.darken{
    background: darken($baseColor,10%);
}

編譯出來的 css 代碼：

//CSS
.lighten {
  background: #db1926;
}

.darken {
  background: #7f0f16;
}

從效果中，明顯看出顏色之間的差異，我們使用函數(shù) lightness() 函數(shù)來驗(yàn)證一下三個(gè)顏色之間亮度值的變化：

>> lightness(#ad141e) //原色的亮度值
37.84314%
>> lightness(#db1926) //在原色的亮度值基礎(chǔ)上增加10%
47.84314%
>> lightness(#7f0f16) //在原色的亮度值基礎(chǔ)上減少10%
27.84314%

lighten() 和 darken() 函數(shù)只是在原始顏色的基礎(chǔ)上對亮度值進(jìn)行運(yùn)算操作，但是生成出來的新顏色在色相和飽和度會(huì)有略微的變化，比如上面的實(shí)例生成的新顏色與原始色在色相與飽和度值的對比：

>> hue(#ad141e)
356.07843deg
>> hue(#db1926)
355.97938deg
>> hue(#7f0f16)
356.25deg
>> saturation(#ad141e)
79.27461%
>> saturation(#db1926)
79.5082%
>> saturation(#7f0f16)
78.87324%

如果有點(diǎn)顏色概念基礎(chǔ)的同學(xué)應(yīng)該都清楚，不管什么顏色當(dāng)其亮度值 趨近于0時(shí)，顏色會(huì)越來越暗，直到變成了黑色；反之，當(dāng)其亮度值趨近于 100% 時(shí)，顏色會(huì)越來越亮，直到變成了白色。但當(dāng)使用 lighten() 和 darken() 函數(shù)對一個(gè)顏色的亮度值計(jì)算時(shí)，會(huì)碰到兩個(gè)極端，lighten() 函數(shù)會(huì)讓新顏色的亮度值超過 100%，而 darken() 函數(shù)會(huì)讓新顏色的亮度值低于 0 變成負(fù)數(shù)?？蓪?shí)際上任何顏色的亮度值都在 0~100% 之間，如此一來，Sass 的 lighten() 和 darken() 函數(shù)又將會(huì)如何處理呢？

帶著上面的疑問，我們一起來做一個(gè)簡單性的測試。從上面的示例中得知 #ad1414 的亮度值為 37.84314%，為了讓新顏色的亮度值大于 100% 和小于 0，在對應(yīng)的函數(shù)，做一些調(diào)整：

//SCSS
$baseColor:#ad141e;
.lighten {
    background: lighten($baseColor,70%);
}
.darken{
    background: darken($baseColor,40%);
}

編譯出來的 css 代碼：

//CSS
.lighten {
  background: white;
}

.darken {
  background: black;
}

上面的例子說明了一切問題。當(dāng)顏色的亮度值接近或大于 100%，顏色會(huì)變成白色；反之顏色的亮度值接近或小于 0 時(shí)，顏色會(huì)變成黑色。