SCSS的rgba()函数无法读取CSS变量，因其是编译期函数，只接受字面数字或已知颜色值；而var(--r)是运行时语法，Sass不解析、不展开，直接保留字符串导致NaN或编译失败。
SCSS的rgba()函数根本无法读取CSS变量
因为rgba()是Sass编译期函数，只在构建阶段运行；而var(--r)是浏览器运行时才解析的CSS语法，两者不在同一时空。Sass编译器看到var(--r)只会原样保留字符串，不会尝试展开或计算——所以rgba(var(--r), var(--g), var(--b), 0.8)直接被当成无效调用，轻则输出rgba(NaN, NaN, NaN, 0.8)，重则编译失败。
rgba()只接受字面数字或已知颜色值
它的合法签名只有两种：rgba($color, $alpha) 或 rgba(255, 130, 64, 0.7)。哪怕你写$r: 59，再写rgba($r, $g, $b, $a)也会报错——Dart Sass明确拒绝变量填充RGB分量位置。
- ✅ 正确：用
rgb($r, $g, $b)先构造颜色，再套rgba($color, $a) - ✅ 正确：已有十六进制变量
$base: #3b82f6，直接rgba($base, 0.3) - ❌ 错误：试图把
var(--r)塞进rgba()任何参数位 - ❌ 错误：用
#{$r}插值拼成rgba(#{$r}, #{$g}, #{$b}, 0.3)——生成的是非法CSS，浏览器直接丢弃整条声明
想让CSS变量参与透明度控制？绕开rgba()函数
真需要运行时动态改透明度，就别在SCSS里硬凑。正确路径是：
- 在
:root中定义带alpha的完整颜色变量，比如--bg-color: rgba(59, 130, 246, 0.3) - 或拆成
--bg-r: 59; --bg-g: 130; --bg-b: 246; --bg-a: 0.3，然后JS用element.style.backgroundColor = `rgba(${r}, ${g}, ${b}, ${a})`更新（注意：这是最后手段，会绕过CSS变量继承链） - 更推荐：用
hsla()配合CSS变量，例如background-color: hsla(var(--h), var(--s), var(--l), var(--a, 1))，其中--h/--s/--l由SCSS预设并导出为CSS变量
容易被忽略的关键点
很多人以为只要把SCSS变量“转成”CSS变量就能让rgba()识别，其实完全不是一回事。SCSS的rgba()函数连var(--x)的字符串都懒得碰——它只认编译时就确定的数值或颜色。真正要混用，必须分清边界：SCSS负责生成静态颜色逻辑并导出为--css-var，浏览器负责运行时解析和组合。跨过这条线，要么编译失败，要么样式静默失效。
立即学习“前端免费学习笔记（深入）”；
