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

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

同樣在你的終端，通過(guò) sass -i 來(lái)對(duì)上面的各個(gè)函數(shù)做一個(gè)簡(jiǎn)單測(cè)試：

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

>> hsla(200,30%,60%,.8)//通過(guò)h200,s30%，l60%,a80%創(chuàng)建一個(gè)顏色
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ù)主要是通過(guò)顏色的 H、S、L 或者 A 幾個(gè)參數(shù)獲取一個(gè) rgb 或 rgba 表達(dá)的顏色，這兩個(gè)函數(shù)與 CSS 中的無(wú)太大區(qū)別，只是使用這兩個(gè)函數(shù)能幫助您知道顏色的十六進(jìn)制表達(dá)式和 rgba 表達(dá)式。

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

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