使用SASS或CSS变量时，rgba效果不适用

Question

您好，我知道这可能是一个重复的问题，但是我已经尝试了所有可以在互联网上找到的内容，但是没有任何效果。

在此link

中遵循这些建议

函数rgba（）和rgb（）在其中使用sass或css变量时均未反映任何更改。

--color: 1,60,255;
// usage
border: 1px solid rgba(var(--color), 0.4);

不起作用

border: 1px solid RGBA(var(--color), 0.4);

即使大写字母也不起作用

border: #{'1px solid rgba(var(--color), 0.4)'};

无礼插值也不起作用

仅此一项有效

border: 1px solid RGBA(1, 60, 255, 0.4);

但是，如果我想开始使用最后一个解决方案，则将无法使用变量，并且如果发生某些变化，我将不得不做大量的虚拟工作。

Answer 1

使用css变量（自定义属性）时，需要将它们应用于元素（如果要全局声明它们，则应:root）。您不能像声明Sass变量那样简单地声明它们。因此，在您的示例中，它看起来像：

:root {
  --color: rgba(1, 60, 255, .4);
}

div {
  border: 1px solid var(--color);
}