scss rgba 和从 css vars 加载；答案

【问题标题】：scss rgba and loading from css vars;scss rgba 和从 css vars 加载；
【发布时间】：2020-11-21 07:29:21
【问题描述】：

这是我想要达到的目标。

我正在尝试从 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);

在笔中我把它做成了一个mixin，但结果是一样的。

如您所见，第一条“不透明”背景不起作用。我正在使用 css 加载 css 变量

https://jsfiddle.net/8dwg7ncy/

【问题讨论】：

标签： javascript css sass

【解决方案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。

【讨论】：

解决这个问题的一种方法（非常冗长但可行）是将 RGB 值存储在三个单独的变量中，并像这样插入它们：例如background: rgba(var(--colorR, var(--colorG), var(--colorB), 0.5)。
这给了我一个想法，如果我创建一个 sass mixin 来解构 3 种颜色的十六进制并以正确的方式写入会怎样。过一会试试这个，如果可行的话就贴在这里。
@Rigudi 可能 red($color), green($color), blue($color) 会为你做这件事。
感谢您，我找到了一个解决方案：保存变量时，我保存了第二个变量 const root = this.window.document.querySelector(':root'); root.style.setProperty(key, value); if (value.charAt(0) === '#') { const rgbValue = hexToRgb(value); root.style.setProperty(key+'-rgb', rgbValue); } 并像这样使用它 @include rgba-background(--color-rgb, 0.96); 并且它可以使用十六进制到 rgb 导出颜色，如下所示：@987654329 @${r},${g},${b}`