saturate()、desaturate()這兩個(gè)函數(shù)是通過(guò)改變顏色的飽和度來(lái)得到一個(gè)新的顏色，他們和前面介紹的修改亮度得到新顏色的方法非常相似。

//SCSS
$baseColor: #ad141e;
.saturate {
  background: saturate($baseColor,30%); //在原色飽和度基礎(chǔ)上增加飽和度
}
.desaturate {
  background: desaturate($baseColor,30%);//在原色飽和度基礎(chǔ)上減少飽和度
}

編譯出來(lái)的 css 代碼：

//CSS
.saturate {
  background: #c1000d;
}

.desaturate {
  background: #903137;
}

顏色變了。同樣使用 saturation() 函數(shù)在終端中進(jìn)行計(jì)算一下，看看他們有什么樣的變化：

>> saturation(#ad141e) //原色的飽和度
79.27461%
>> saturation(#c1000d)  //在原色飽和度基礎(chǔ)上增加30%,超過(guò)100%時(shí)按100%計(jì)算
100%
>> saturation(#903137) //在原色飽和度基礎(chǔ)上減少30%,小于0時(shí)按0計(jì)算
49.2228%