css - Using a Sass variable mapped to an hsl value doesn't work when trying to use it with hsla -
i have sass variable mapped hsl value. when try use hsla add little transparency, doesn't work. i'm doing this:
$white:hsl(100, 100%, 100%); .thing{ color:hsla($white,.9); }
using gulp-sass build css, error: "required parameter $lightness missing in call function hsla on line {line number} in {file's path}"
if replace hsla
rgba
works fine and, yes, can that, i'd keep colors in hsl. there workaround or sass issue?
it's not issue sass, functionality doesn't exist. if @ documentation, there 2 versions of rgba(), 1 accepts of parameters separately , 1 accepts color object.
rgba($red, $green, $blue, $alpha)
rgba($color, $alpha)
if @ documentation hsla(), accepts values separately.
hsla($hue, $saturation, $lightness, $alpha)
to achieve goal, this:
$white:hsl(100, 100%, 100%); .thing{ color: hsla(hue($white), saturation($white), lightness($white), .9); }
or... if want pass color object, can create own function since 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 color object"; } }
Comments
Post a Comment