HSL()函數

Ｈ：hue（色相）、Ｓ：saturation(飽和度)、Ｌ：lightness（亮度）

1. hsl($hue,$saturation,$lightness)：通過色相（hue）、飽和度(saturation)和亮度（lightness）的值創建一個顏色。

// scss //
a{
    Hsl:hsl(20,40%,60%);
}

｜　編譯後：依照h:20,s:40%,l:60%創建一個顏色值 #c28b70。
Ｖ

// css //
a {
  Hsl: #c28b70;
}

2. hsla($hue,$saturation,$lightness,$alpha)：通過色相（hue）、飽和度(saturation)、亮度（lightness）和透明（alpha）的值創建一個顏色。

// scss //
b{
    Hsla:hsla(20,40%,60%,.87);
}

｜　編譯後：依照h:20,s:40%,l:60%,a:87%創建一個顏色值。
Ｖ

// css //
b {
  Hsla: rgba(194, 139, 112, 0.87);
}

3. hue($color)：從一個顏色中獲取色相（hue）值。

// scss //
c{
    Hue:hue(#14283c);
}

｜　編譯後：得到#14283c的色相值。
Ｖ

// css //
c {
  Hue: 210deg;
}

4. saturation($color)：從一個顏色中獲取飽和度（saturation）值。

// scss //
d{
    Saturation:saturation(#14283c);
}

｜　編譯後：得到#14283c的飽和度值。
Ｖ

// css //
d {
  Saturation: 50%;
}

5. lightness($color)：從一個顏色中獲取亮度（lightness）值。

// scss //
e{
    Lightness:lightness(#14283c);
}

｜　編譯後：得到#14283c的亮度值。
Ｖ

// css //
e {
  Lightness: 15.6862745098%;
}

6. adjust-hue($color,$degrees)：通過改變一個顏色的色相值，創建一個新的顏色。色相度數值在-360deg至360deg之間(deg=%)，

// scss //
f{
    Adjust-hue:adjust-hue(#14283c,150deg);
}

｜　編譯後：改變#14283c顏色的色相值為150deg。
Ｖ

// css //
f {
  Adjust-hue: #3c1414;
}

7. lighten($color,$amount)：通過改變顏色的亮度值，讓顏色變亮，創建一個新的顏色。

// scss //
g{
    Lighten:lighten(#14283c,50%);
}
g{
    Lighten:lighten(#14283c,99%);
}

｜　編譯後：把#14283c顏色亮度提高50%、99%。
Ｖ　　　　　(當顏色的亮度值接近或大於100%，顏色會變成白色)。

// css //
g {
  Lighten: #7ca8d3;
}
g {
  Lighten: white;
}

8. darken($color,$amount)：通過改變顏色的亮度值，讓顏色變暗，創建一個新的顏色。

// scss //
h{
    Darken:darken(#14283c,10%);
}
h{
    Darken:darken(#14283c,99%);
}

｜　編譯後：把#14283c顏色亮度降低10%、99%。
Ｖ　　　　　(當顏色的亮度值接近或大於100%，顏色會變成黑色)。

// css //
h {
  Darken: #070f16;
}
h {
  Darken: black;
}

9. saturate($color,$amount)：通過改變顏色的飽和度值，讓顏色更飽和，從而創建一個新的顏色。

// scss //
i{
    Saturate:saturate(#14283c,50%);
}

｜　編譯後：把#14283c顏色飽和度提高50%。
Ｖ

// css //
i {
  Saturate: #002850;
}

10. desaturate($color,$amount)：通過改變顏色的飽和度值，讓顏色更少的飽和，從而創建出一個新的顏色。

// scss //
j{
    Desaturate:desaturate(#14283c,50%);
}

｜　編譯後：把#14283c顏色飽和度降低50%。
Ｖ

// css //
j {
  Desaturate: #282828;
}

11. grayscale($color)：將一個顏色變成灰色，相當於desaturate($color,100%)。

// scss //
k{
    Grayscale:grayscale(#14283c);
}

｜　編譯後：把#14283c顏色變成灰色。
Ｖ

// css //
k {
  Grayscale: #282828;
}

12. complement($color)：返回一個補充色，相當於adjust-hue($color,180deg)。

// scss //
l{
    Complement:complement(#14283c);
}

｜　編譯後
Ｖ

// css //
l {
  Complement: #3c2814;
}

13. invert($color)：反回一個反相色，紅、綠、藍色值倒過來，而透明度不變。

// scss //
m{
    Invert:invert(#14283c);
}

｜　編譯後
Ｖ

// css //
m {
  Invert: #ebd7c3;
}