使用带有 scss 变暗和变亮滤镜的 css 变量

Question

我想将 scss lighten() 和 darken() 函数与 CSS4 var 一起使用。

像这样：

box-shadow: inset 0px -2px 50px 45px darken(var(--colorbtn),20%);

好像不行，gulp这样写：

Error: $color: "var(--colorbtn)" is not a color for `darken'

这样不行吗？

Answer 1

这实际上是行不通的，因为 SASS 是一个预处理器，并且 CSS 自定义属性可以在运行时动态更改。为了让 SASS 能够使用 darken 对其进行预处理，它必须将自定义属性替换为静态值，在这种情况下，自定义属性的用处就会丢失。