Sass: Using HSLa Fallback Technique [duplicate]

StackOverflow https://stackoverflow.com/questions/13409839

  •  29-11-2021
  •  | 
  •  

Question

Does anyone know a workaround for enabling HSLa color declarations in SASS-compiled stylesheets?

I'd like to use HSLa for the reasons discussed in this article by Chris Coyier. The fallback technique recommended in the Modernizr Docs is to declare a hex value first followed by the HSLa value for supporting browsers.

However, the way Sass currently implements its hsla() instance method makes it impossible to use this technique -- all HSLa values are compiled to hex, which means the hex color just gets repeated.

I've tried defining the Sass color variable as a string, but that compiles to a quoted string in the stylesheet.

Can anyone suggest a hack for getting HSLa output using Sass?

Was it helpful?

Solution

You can make it into a string and then unquote it. This will prevent the Sass hsla() function from being called:

.test {
    background-color: #e2ecf0; /* Fallback */
    background-color: unquote("hsla(190, 30%, 94%, 1)"); 
}

Generates:

.test {
  background-color: #e2ecf0;
  /* Fallback */
  background-color: hsla(190, 30%, 94%, 1);
}

OTHER TIPS

You can also use interpolation (#{}) and quotes:

.test {
    background-color: #e2ecf0; // Fallback
    background-color: #{"hsla(190, 30%, 94%, 1)"}; 
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top