Sass Color功能 - 包括多个

Question

我需要HSL颜色，例如，同时调整色调，饱和度和亮度。而且我已经注意到我是否一个接一个地这样做，如

$color: hsl color code;

$new-color: adjust-hue($color, -1);
$new-color: lighten($color, 20%);
$new-color: desaturate($color, 10%);

它实际上并未正确应用它们。所以我的问题是，如何将它包装在一个函数或mixin中（在这种情况下哪个更合适）所以它看起来更干净，行为也正常？谢谢！

Answer 1

首先，在您当前的代码中，您在每个步骤更新$new-color变量上的变量$color是不正确的。

现在，如果您想同时调整色调，饱和度和亮度，那么adjust-color()（See documentation）就是您要找的。

例如，以下等同于

$color: hsl(120,100%,50%);

$new-color: adjust-hue($color, -1);
$new-color: lighten($new-color, 20%);
$new-color: desaturate($new-color, 10%);

这个

$color: hsl(120,100%,50%);

$new-color: adjust-color($color, $hue: -1,$lightness: 20%, $saturation: -10%);