不能在 SCSS 中使用滤镜灰度内部的 CSS 变量

Question

我正试图使filter: grayscale(100%);中的100%成为CSS变量，以便以后可以使用JavaScript动态更改它。

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

这不是用达特萨斯编译的。它告诉我：

Dart-Sass失败，错误为：$color:var(--percent(不是颜色。filter：灰度(var(--percent((；

这对我来说没有任何意义，因为它与普通CSS配合得很好。

如何让这个普通的CSS变量与Dart Sass一起工作？

Answer 1

因为它与Sass的灰度函数冲突，并且Sass特定的函数无法处理CSS变量。

这样使用：

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