Sass: Using HSLa Fallback Technique [duplicate]

Question

This question already has an answer here:

Why does Sass change the format of my colors? (1 answer)

Closed 6 years ago.

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?

Answer 1

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);
}

Answer 2

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

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