如何让CSS变量在Dart Sass的filter: grayscale()中正常工作？

问题原因 #

Dart Sass会自动解析grayscale()函数的参数，误将var(--percent)判定为需要处理的Sass变量或颜色值，而非原生CSS变量，因此抛出编译错误。

解决方法 #

以下两种方式可让Sass直接输出原生CSS变量，跳过解析流程：

• 方法一：使用unquote()函数
  用unquote()包裹var(--percent)，明确告知Sass不解析该内容：

  --percent: 100%;
  filter: grayscale(unquote("var(--percent)"));
  

• 方法二：使用Sass插值语法
  通过#{}插值语法，让Sass将括号内的内容当作原生CSS直接输出：

  --percent: 100%;
  filter: grayscale(#{"var(--percent)"});
  

两种方法都能保留原生CSS变量语法，既通过Dart Sass编译，又不影响后续用JavaScript动态修改--percent变量的值。

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