无法在使用SCSS的灰度滤镜中使用CSS变量

Question

无法在使用SCSS的灰度滤镜中使用CSS变量

3

我正在尝试将 filter: grayscale(100%); 中的 100% 变成一个 CSS 变量，以便稍后可以通过 JavaScript 动态更改它。

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

这段文字的意思是：使用Dart Sass编译时出错，提示错误信息为：“Dart Sass失败，错误为：$color: var(--percent)不是一种颜色。filter: grayscale(var(--percent));”。我不理解这个错误，因为它在普通的CSS中可以正常工作。请问如何让这个普通的CSS变量在Dart Sass中正常工作？

- briann

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- doğukan · Accepted Answer

因为它与Sass的灰度函数the grayscale function of Sass冲突，而Sass特定函数无法处理CSS变量。

使用以下方式：

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