javascript - 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) 将被编译为 rgba(var(--black), .5)，假设您说 --black: #000000; 浏览器将不会渲染 rgba(#000000, .5) ，CSS 尚不支持。

不是你的 JS 惹麻烦，而是 Sass 就是 Sass。