由于CSS自定义属性导致Sass中断？

假设您拥有颜色的CSS自定义属性：

--颜色：255,0,0

您每次都想根据需要将其与

rgb

或

rgba

特别混合。这是有效的CSS：

rgba（var（--color），.3）

…但是粗鲁无礼会爆发。我一直在试着看我是否能写一个mixin或其他东西，但我不知道如何避开Sass坚持使用自己的颜色函数，即使它们不是必需的。

也许使用

rgba（#{--color}.3）

？

rgba（var（--color），.3）是无效的：

div{
宽度：50px；
高度：20px；
轮廓：1px黑色虚线；
}
：根{
--颜色：红色；
}
#正确的{
背景：var（--颜色）；
}
#不正确{
背景：rgba（var（--颜色），图3；
}

---

明白了！这有点老套，但这允许您创建一个自定义函数，该函数使用带有CSS自定义属性的

rgba（）

函数（如规范所允许）：

---

在中找到解决方案的密钥。这仅仅是因为取消引用和插值绕过了默认的

rgba（）

函数。

另一个临时解决方法是仅在变量中使用RGB值，就像您已经使用的那样：

--color: 255, 255, 255;

然后，如果将RGB或RGBA函数与大写字母一起使用，SASS将忽略它，而纯CSS能够解析它。然后可以调整不透明度

RGB(var(--color));
RGBA(var(--color), .3);

---

——颜色：红色将使其无效。注意我是如何使用
--color:255,0,0这在纯CSS:：root{--color:255,0,0；}div{background color:rgba（var（--color），.3）；}返回的错误为：
error:argument
$color`of
rgba（$color，$alpha）
必须是一种颜色`对于添加的上下文，我知道它在定义变量的方式中必须是三位数字。我已经在香草CSS中测试过了，它是有效的。这似乎是一个bug，Sass还不知道如何处理自定义属性。
RGB(var(--color));
RGBA(var(--color), .3);