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?

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