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

Popular posts from this blog

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

java - UML - How would you draw a try catch in a sequence diagram? -

c++ - No viable overloaded operator for references a map -