在 SCSS 中使用 CSS var 会引发语法错误（SASS Live Compiler）答案

【问题标题】：Using CSS vars in SCSS throws syntax error (SASS Live Compiler)在 SCSS 中使用 CSS var 会引发语法错误（SASS Live Compiler）
【发布时间】：2019-11-26 02:14:01
【问题描述】：

我正在尝试将 CSS 变量应用于我的 RBG/RGBA，但我的 VS Code Live SASS 编译器抛出一个语法错误，告诉我我没有提供足够的参数。有解决办法吗？

CSS

:root {
    --bg-color: 50, 50, 50, 0.5;
}

.container {
    background: rgba(var(--bg-color));
}

VS Code Live SASS 编译错误：

--------------------
Compilation Error
Error: overloaded function `rgba` given wrong number of arguments
        on line 329 of sass/.../main.scss
>>             background: rgba(var(--bg-color));
   ------------------------^

--------------------

【问题讨论】：

这里回答了这个问题：stackoverflow.com/questions/40010597/…。不透明度呈现在 rgb 声明括号之外。在这种情况下，这可能意味着 rgb 的一个变量和 alpha 百分比的另一个变量。
如果我只使用 RGB，我也会遇到同样的问题。似乎没有办法告诉 VS Code Live SASS 编译器忽略这一点。
您是否尝试过使用较少的 $variable 而不是 css 变量？

标签： css visual-studio-code sass

【解决方案1】：

SASS 尝试使用SASS-specific rgba() function 编译样式。不过rgba() is also a native CSS function，所以可以使用字符串插值绕过SASS函数。

:root {
    --bg-color: 50, 50, 50, 0.5;
}

.container {
    /* This is valid CSS, but will fail in a scss compilation */
    background: rgba(var(--bg-color));
    
    /* This is valid scss, and will generate the CSS above */
    background: #{'rgba(var(--bg-color))'};
}

取自this answer on SO。

【讨论】：