scss rgba 并从 css 变量加载；

Question

这是我想要实现的目标的一支笔。

我正在尝试从 js 加载 css var。它工作得很好，但 rgba () 函数除外

 this.window.document.querySelector(':root').style.setProperty('--color', '#000');

这有效

.no-opacity{
  color: white;
  background: var(--color)
}

这不

background: rgba(var(--color), 0.5);

在笔中，我将其作为混合，但结果是相同的。

正如您所看到的，第一个栏“不透明度”背景不起作用。我正在使用 css 加载 css 变量

https://jsfiddle.net/8dwg7ncy/

Answer 1

这是因为 Sass 不理解也无法解释 CSS。CSS 变量将被 Sass 直接读取，浏览器将最终编译 CSS。因此rgba(var(--black), .5)，假设您说浏览器不会渲染，而不是被编译为 将rgba(0, 0, 0, .5)被编译为，这在 CSS 中尚不支持。rgba(var(--black), .5)--black: #000000;rgba(#000000, .5)

不是你的 JS 造成了麻烦，而是 Sass 就是 Sass。