4-8 HSL函数-adjust-hue()函数

这个是通过调整颜色的色相换算一个新颜色。他需要一个颜色和色相度数值。通常这个度数值是在 -360deg 至 360deg 之间，当然了可以是百分数：

//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;
}

从转译出来的代码，不难发现他们的颜色是一样的。尝试多次，如果两个值（抛弃 deg 和 100%）相同，计算出来的颜色也会一样。

同样的，可以通过 hue() 函数得到颜色转换前后的色相值：

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

这里有一个很有意思的地方，在 HSL 颜色表达方式上，色相是从 -360 和 360 之间，负值逆时针转，正值顺时针转。在这个实例中，原色的色相值约 356deg，加上 30deg 后，新颜色变成了 386deg，但我们的色盘中并没有比 360deg 更大的值，此时新颜色的值也并不会是386deg，那将怎么办呢？其实很简单，当值大于 360deg时，表示色盘转完了一圈，继续顺时针转余下的值（这里是 26deg），那么这个继续转的值就是新颜色的色相值。小伙伴们，看到这个，你是不是又有点惊了。反之，得到的负数值也是一样的道理。