Sass：使用 HSLa 后备技术答案

【问题标题】：Sass: Using HSLa Fallback Technique [duplicate]Sass：使用 HSLa 后备技术
【发布时间】：2012-11-16 11:40:37
【问题描述】：

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

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

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

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

谁能建议一个使用 Sass 获取 HSLa 输出的技巧？

【问题讨论】：

标签： css sass hsl

【解决方案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);
}

【讨论】：

太棒了——以前没见过 unquote()，这可能是一个非常方便的工具。非常感谢
但是 hsla 的优势（如文章中所述）是它作为设计师的意义所在。出于这个原因，我一直在 Sass 中使用它。但是如果优势在你这边，并且 Sass 允许这样做，并且输出已经在所有浏览器中工作而没有任何负面影响，那么你为什么要关心它是 hex/rgba 输出呢？标准的 Sass 输出实际上比回退更更干净。当您可以使用真实的东西并让 Sass 为您进行转换时，为什么还要使用后备？

【解决方案2】：

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

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

【讨论】：