Sass HSL function

sass在顏色的處理有許多function可以用，如果多善用這些function可以讓網頁有更多的變化，並且提高網頁的一致性。

HSL Functions

HSL function 是我使用頻率較高的function，而HLS就是色彩學中的色相、明度、彩度，如果不清楚可以看一下Adobe所提供的色相環，自己親自玩看看就會比較了解了。

一開始我們先定義一個有點橘，但不會太橘的顏色(這樣等等demo會比較明顯)。

#F09671

$color: #F09671
//然後我們要給他一個變數，就叫做<code>$color</code>

先來點簡單的，調整明亮度Darken & Lighten。

lighten($color, $amount)
//Makes a color lighter.
darken($color, $amount)
//Makes a color darker.

darken($color,15%) = #e35318

$color = #F09671

lighten($color,15%) = #fadacd

saturate($color, $amount)
//Makes a color more saturated.
desaturate($color, $amount)
//Makes a color less saturated.

saturate($color,15%) = #fc9165

$color = #F09671

desaturate($color,15%) = #e49b7d

其實就是取得顏色在色相環的位置，所以這個demo是錯誤地~。

hue($color)
//Gets the hue component of a color.

$color = #F09671

hue($color) = 17.48031deg

調整色相環位置。

adjust-hue($color, $degrees)
//Changes the hue of a color.

$color = #F09671

hue($color) = #f0b671

喔喔~又是一個錯誤的demo，這是取得顏色的目前明度值。

lightness($color)
//Gets the lightness component of a color.

$color = #F09671

lightness($color)= 69.21569%

我們可以看到剛剛的lighten + 15%，他的明度值確實也提高了15%。

$color = #F09671

lighten($color,15%)= 84.21569%

將顏色調整為灰階，調整為灰階明度是不會改變的。

grayscale($color)
//Converts a color to grayscale.

$color = #F09671

grayscale($color)= #b1b1b1
lightness(grayscale($color)) = 69.21569%

complement($color)
//Returns the complement of a color.

$color = #F09671

complement($color)= #71cbf0

這我有點不清楚怎麼解釋，就看一下他在色相環的結果

```sass Invert($color) //Returns the inverse of a color. ```sass

$color = #F09671

complement($color)= #0f698e