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()(请参阅文档(就是您正在寻找的。

例如，以下内容等效于

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