如何在sass-rails解释器中使用CSS变量？解决解析冲突

问题原因 #

Sass会优先解析自身内置的hsl()函数，当你在CSS变量中使用原生CSS的hsl(var(--h), 100%, var(--l))写法时，Sass会把var(--h)当作字符串传入自身的hsl函数，从而抛出$hue: "var(--h)" is not a number for 'hsl'的错误。

简单可行的解决方案 #

有两种直接有效的方法可以让Sass不对CSS变量部分进行解析：

方法1：使用Sass的unquote()函数 #

把包含CSS变量的hsl表达式用unquote()包裹，让Sass直接输出原生CSS代码，不做解析处理：

--h: 198
--l: 38%
--c: unquote("hsl(var(--h), 100%, var(--l))")
background-image: linear-gradient(to right, var(--c) 0%, #000 100%)

方法2：使用插值语法#{} #

通过插值语法将var(--h)和var(--l)直接插入到hsl表达式中，绕过Sass对hsl函数的解析：

--h: 198
--l: 38%
--c: hsl(#{var(--h)}, 100%, #{var(--l)})
background-image: linear-gradient(to right, var(--c) 0%, #000 100%)

两种方法都能让代码正常编译，输出符合原生CSS规范的变量用法。

内容的提问来源于stack exchange，提问作者Matrix