Sass颜色功能 - 包含多个

Question

我有HSL颜色，我需要，例如，一次调整色调，饱和度和亮度。我注意到，如果我一个一个这样做，如在

$color: hsl color code; 

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

它实际上并没有正确应用它们。所以我的问题是，我怎样才能把它包装在一个函数或混合中（在这种情况下更合适），使它看起来更干净并且行为正确呢？谢谢！

Answer 1

首先，在您当前的代码中，您正在更新$color变量的变量$new-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%);