sass
在顏色的處理有許多function可以用,如果多善用這些function可以讓網頁有更多的變化,並且提高網頁的一致性。
HSL Functions
HSL function 是我使用頻率較高的function,而HLS就是色彩學中的色相、明度、彩度,如果不清楚可以看一下Adobe所提供的色相環,自己親自玩看看就會比較了解了。
一開始我們先定義一個有點橘,但不會太橘的顏色(這樣等等demo會比較明顯)。
$color: #F09671
//然後我們要給他一個變數,就叫做<code>$color</code>
Darken & Lighten 明亮度
先來點簡單的,調整明亮度Darken & Lighten。
lighten($color, $amount)
//Makes a color lighter.
darken($color, $amount)
//Makes a color darker.
Saturate & Desaturate 飽和度
saturate($color, $amount)
//Makes a color more saturated.
desaturate($color, $amount)
//Makes a color less saturated.
Hue
其實就是取得顏色在色相環的位置,所以這個demo是錯誤地~。
hue($color)
//Gets the hue component of a color.
Adjust-hue
調整色相環位置。
adjust-hue($color, $degrees)
//Changes the hue of a color.
lightness
喔喔~又是一個錯誤的demo,這是取得顏色的目前明度值。
lightness($color)
//Gets the lightness component of a color.
我們可以看到剛剛的lighten + 15%,他的明度值確實也提高了15%。
Grayscale
將顏色調整為灰階,調整為灰階明度是不會改變的。
grayscale($color) //Converts a color to grayscale.
lightness(grayscale($color)) = 69.21569%
Complement 互補色
complement($color)
//Returns the complement of a color.
Invert
這我有點不清楚怎麼解釋,就看一下他在色相環的 結果
```sass Invert($color) //Returns the inverse of a color. ```sass