Sass 中 rgba() 仅接受编译期可识别的 color 类型变量，如 $primary: #3498db；不可用字符串、CSS 变量或分离 RGB 值直接调用，需先用 rgb($r, $g, $b) 构造颜色；transparentize() 不等价于 rgba()，因其改变明度而非仅 alpha；CSS 变量透明度需构建时或运行时处理。
直接用 rgba($color, $a)，但前提是 $color 必须是 Sass 解析出的 color 类型（如 #3b82f6），不能是字符串、CSS 变量或带引号的值——否则编译报错或输出无效 CSS。
SCSS 中 rgba() 函数只认真正的 color 类型
你写 rgba("#3498db", 0.6) 或 rgba(var(--primary), 0.6)，Sass 会直接拒绝：Argument $color must be a color。因为前者是字符串，后者是运行时 CSS 变量，Sass 在编译期根本无法识别为颜色。
必须这样定义变量：
-
$primary: #3498db（无引号，Sass 自动识别为 color） - 然后才能安全调用
rgba($primary, 0.6) - 如果变量来自外部（比如 JSON 配置或 PHP 注入），需确保它在 SCSS 编译前已转为合法 color，而不是后期拼字符串
RGB 分量变量必须先用 rgb() 构造再喂给 rgba()
如果你只有分开的 $r、$g、$b（比如从设计系统 API 拿到的数字），不能直接 rgba($r, $g, $b, $a)——Dart Sass 明确不支持这种签名，会返回 rgba(NaN, NaN, NaN, 0.3)。
正确路径是两步：
- 先用
rgb($r, $g, $b)构造一个 color 值（$r等必须是纯数字，不能带单位或引号） - 再传给
rgba($color, $a)，例如：rgba(rgb($r, $g, $b), $a) - 若输入可能是 3 位 hex（如
#38f），得先扩展成 6 位再拆分，否则slice()或索引取值容易越界或错位
别把 transparentize() 当成 rgba() 的替代品
transparentize($color, 0.3) 看起来像“设透明度”，但它实际是 mix(black, $color, 30%)，结果是暗化后的不透明色，不是视觉上更通透的浅色。比如 transparentize(#ff0000, 0.3) 输出的是 #cc0000，不是 rgba(255, 0, 0, 0.7)。
真正只改 alpha 通道、保持色相和明度不变的，只有 rgba($color, $a) 或 hsla($h, $s, $l, $a)。
想让颜色可参与后续运算（比如再 lighten()），也得用 rgba()，因为 transparentize() 返回的仍是 color 类型；而 rgba($color, $a) 返回的也是 color 类型，这点常被忽略。
CSS 变量加透明度只能靠 JS 或构建时处理
如果颜色存在 CSS 变量里（如 --primary: #3b82f6），Sass 无法在编译期读取它。此时 rgba(var(--primary), 0.6) 是非法 CSS，浏览器不识别。
可行方案只有：
- 构建时用 PostCSS 插件（如
postcss-color-function）解析并替换 - 运行时用 JS 读取
getComputedStyle，手动转 hex → RGB →rgba()再写回 style - 提前在构建脚本中把 CSS 变量映射为 SCSS 变量（比如从主题 JSON 生成
_colors.scss）
没有“一行 Sass 解决”的办法——这是编译期与运行时的根本割裂，不是语法技巧能绕开的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
