Sass Color functions - include more than one

1
votes

I have a HSL color that I need to, for example, adjust hue, saturation, and lightness all at once. And I've noticed if I do that one by one, as in

$color: hsl color code;

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

it doesn't actually apply them correctly. So my question is, how can I wrap this up in a function or a mixin (whatever is more appropriate in this situation) so it looks cleaner and behaves properly too? Thanks!

1
csscolorssass

1 Answers

3
votes

First of all, in your current code, you're updating the variable $new-color on the $color variable at each step which is incorrect.

Now if you want to adjust hue, saturation, and lightness all at once, then adjust-color() (See documentation) is what you're looking for.

For example, following is equivalent to

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

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

this 

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

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