css - Sass：使用 HSLa 后备技术

Question

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

出于 Chris Coyier 的这篇文章中讨论的原因，我想使用 HSLa 。Modernizr Docs中推荐的后备技术是首先声明一个十六进制值，然后是支持浏览器的 HSLa 值。

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

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

任何人都可以建议使用 Sass 获取 HSLa 输出的技巧吗？

score 3 · Accepted Answer

你可以把它变成一个字符串，然后取消引用它。这将阻止调用 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);
}

score 1 · Accepted Answer

您还可以使用插值 ( #{}) 和引号：

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

2 回答 2