Using a Sass variable mapped to an hsl value doesn't work when trying to use it with hsla

Question

I have a Sass variable which mapped to an hsl value. When I try to use it with hsla to add a little transparency, doesn't work. I'm doing this:

$white:hsl(100, 100%, 100%);

.thing{
 color:hsla($white,.9);
}

Using gulp-sass to build my CSS, I get this error: "required parameter $lightness is missing in call to function hsla on line {line number} in {file's path}"

If I replace the hsla with rgba it works fine and, yes, I can do that, but I'd like to keep all my colors in hsl. Is there a workaround or is this a Sass issue?

Answer 1

It's not an issue with SASS, the functionality simply doesn't exist. If you look at the documentation, there are two versions of rgba(), one that accepts all of the parameters separately and one that accepts a Color object.

rgba($red, $green, $blue, $alpha)
rgba($color, $alpha)

If you look at the documentation for hsla(), it only accepts the values separately.

hsla($hue, $saturation, $lightness, $alpha)

To achieve your goal, you could do this:

$white:hsl(100, 100%, 100%);

.thing{
 color: hsla(hue($white), saturation($white), lightness($white), .9);
}

Or... if you want to pass the Color object, you can create your own function since you can't overload functions; e.g. hslac($color, $alpha)

@function hslac($color, $alpha) {
  @if(type-of($color) == "color") {
    @return hsla(hue($color), saturation($color), lightness($color), $alpha);
  }
  @else {
    @error "You didn't pass a color object";
  }
}