這個是通過調整顏色的色相換算一個新顏色。他需要一個顏色和色相度數(shù)值。通常這個度數(shù)值是在 -360deg 至 360deg 之間，當然了可以是百分數(shù)：

//SCSS
$baseColor: #ad141e;
.adjust-hue-deg {
  background: adjust-hue($baseColor,30deg);
}
.adjust-hue-per {
  background: adjust-hue($baseColor,30%);
}

編譯出的 css 代碼：

//CSS
.adjust-hue-deg {
  background: #ad5614;
}

.adjust-hue-per {
  background: #ad5614;
}

從轉譯出來的代碼，不難發(fā)現(xiàn)他們的顏色是一樣的。嘗試多次，如果兩個值（拋棄 deg 和 100%）相同，計算出來的顏色也會一樣。

同樣的，可以通過 hue() 函數(shù)得到顏色轉換前后的色相值：

>> hue(#ad141e) //原顏色色相值
356.07843deg
>> hue(#ad5614) //在原色色相基礎上增加30deg
25.88235deg

這里有一個很有意思的地方，在 HSL 顏色表達方式上，色相是從 -360 和 360 之間，負值逆時針轉，正值順時針轉。在這個實例中，原色的色相值約 356deg，加上 30deg 后，新顏色變成了 386deg，但我們的色盤中并沒有比 360deg 更大的值，此時新顏色的值也并不會是386deg，那將怎么辦呢？其實很簡單，當值大于 360deg時，表示色盤轉完了一圈，繼續(xù)順時針轉余下的值（這里是 26deg），那么這個繼續(xù)轉的值就是新顏色的色相值。小伙伴們，看到這個，你是不是又有點驚了。反之，得到的負數(shù)值也是一樣的道理。