Sass 颜色函数 - 包括多个

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

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

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

例如，下面等价于

$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%);