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