在 Sass 中提供了一系列有關(guān)于 HSL 的顏色函數(shù)，以供大家使用，其中常用的有 saturation、lightness、adjust-hue、lighten、darken 等等。接下來我們先來了解一下 HSL 顏色函數(shù)包括哪些具體的函數(shù)，所起的作用是什么：

• hsl($hue,$saturation,$lightness)：通過色相（hue）、飽和度(saturation)和亮度（lightness）的值創(chuàng)建一個顏色；
• hsla($hue,$saturation,$lightness,$alpha)：通過色相（hue）、飽和度(saturation)、亮度（lightness）和透明（alpha）的值創(chuàng)建一個顏色；
• hue($color)：從一個顏色中獲取色相（hue）值；
• saturation($color)：從一個顏色中獲取飽和度（saturation）值；
• lightness($color)：從一個顏色中獲取亮度（lightness）值；
• adjust-hue($color,$degrees)：通過改變一個顏色的色相值，創(chuàng)建一個新的顏色；
• lighten($color,$amount)：通過改變顏色的亮度值，讓顏色變亮，創(chuàng)建一個新的顏色；
• darken($color,$amount)：通過改變顏色的亮度值，讓顏色變暗，創(chuàng)建一個新的顏色；
• saturate($color,$amount)：通過改變顏色的飽和度值，讓顏色更飽和，從而創(chuàng)建一個新的顏色
• desaturate($color,$amount)：通過改變顏色的飽和度值，讓顏色更少的飽和，從而創(chuàng)建出一個新的顏色；
• grayscale($color)：將一個顏色變成灰色，相當(dāng)于desaturate($color,100%);
• complement($color)：返回一個補(bǔ)充色，相當(dāng)于adjust-hue($color,180deg);
• invert($color)：反回一個反相色，紅、綠、藍(lán)色值倒過來，而透明度不變。

同樣在你的終端，通過 sass -i 來對上面的各個函數(shù)做一個簡單測試：

>> hsl(200,30%,60%) //通過h200,s30%，l60%創(chuàng)建一個顏色
#7aa3b8

>> hsla(200,30%,60%,.8)//通過h200,s30%，l60%,a80%創(chuàng)建一個顏色
rgba(122, 163, 184, 0.8)

>> hue(#7ab)//得到#7ab顏色的色相值
195deg

>> saturation(#7ab)//得到#7ab顏色的飽和度值
33.33333%

>> lightness(#7ab)//得到#7ab顏色的亮度值
60%

>> adjust-hue(#f36,150deg) //改變#f36顏色的色相值為150deg
#33ff66

>> lighten(#f36,50%) //把#f36顏色亮度提高50%
#ffffff

>> darken(#f36,50%) //把#f36顏色亮度降低50%
#33000d

>> saturate(#f36,50%) //把#f36顏色飽和度提高50%
#ff3366

>> desaturate(#f36,50%) //把#f36顏色飽和度降低50%
#cc667f

>> grayscale(#f36) //把#f36顏色變成灰色
#999999

>> complement(#f36)
#33ffcc

>> invert(#f36)
#00cc99

在 HSL 函數(shù)中，hsl() 和 hsla() 函數(shù)主要是通過顏色的 H、S、L 或者 A 幾個參數(shù)獲取一個 rgb 或 rgba 表達(dá)的顏色，這兩個函數(shù)與 CSS 中的無太大區(qū)別，只是使用這兩個函數(shù)能幫助您知道顏色的十六進(jìn)制表達(dá)式和 rgba 表達(dá)式。

而 hue()、saturation() 和 lightness() 函數(shù)主要是用來獲取指定顏色中的色相值、飽和度和亮度值。對于顏色表達(dá)沒有太多的實際作用。

HSL 函數(shù)中最常見的應(yīng)該是 lighten()、darken()、saturate()、desaturate()、grayscale()、complement()和 invert() 幾個函數(shù)。接下來，我們針對這幾個函數(shù)來做進(jìn)一步的了解與學(xué)習(xí)。