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

來看一個簡單的實例，首先定義一個顏色變量：

$baseColor: #ad141e;

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

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

編譯出來的 css 代碼：

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

.darken {
  background: #7f0f16;
}

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

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

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

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

如果有點顏色概念基礎的同學應該都清楚，不管什么顏色當其亮度值 趨近于0時，顏色會越來越暗，直到變成了黑色；反之，當其亮度值趨近于 100% 時，顏色會越來越亮，直到變成了白色。但當使用 lighten() 和 darken() 函數對一個顏色的亮度值計算時，會碰到兩個極端，lighten() 函數會讓新顏色的亮度值超過 100%，而 darken() 函數會讓新顏色的亮度值低于 0 變成負數?？蓪嶋H上任何顏色的亮度值都在 0~100% 之間，如此一來，Sass 的 lighten() 和 darken() 函數又將會如何處理呢？

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

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

編譯出來的 css 代碼：

//CSS
.lighten {
  background: white;
}

.darken {
  background: black;
}

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