Sass：使用HSLa后备技术

Question

有没有人知道在SASS编译的样式表中启用HSLa颜色声明的解决方法？

我想使用HSLa，原因是Chris Coyier在article中讨论的原因。 Modernizr Docs中建议的后备技术是首先声明十六进制值，然后是支持浏览器的HSLa值。

然而，Sass目前实现其hsla() instance method的方式使得无法使用这种技术 - 所有HSLa值都被编译为十六进制，这意味着十六进制颜色只会重复。

我尝试将Sass颜色变量定义为字符串，但是它会在样式表中编译成带引号的字符串。

有人建议使用Sass获取HSLa输出吗？

Answer 1

您可以将其变为字符串然后取消引用它。这将阻止调用Sass hsla（）函数：

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

生成：

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

Answer 2

您还可以使用插值（#{}）和引号：

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