css变量无法直接用于rgba()因var()返回字符串而非颜色值；正确做法是将颜色拆为rgb或hsl分量存变量，再用rgb()/rgba()或hsl()/hsla()组合使用。
为什么 rgba(var(--color), a) 不生效
浏览器解析时，var(--color) 先被替换为字符串 "#242424"，再传给 rgba()；但 rgba() 拒绝接收字符串，只接受已解析的颜色（如 rgb(36, 36, 36) 或 #242424 字面量）。所以整条声明被丢弃，回退到继承色或初始值。
正确做法：把 HEX 拆成 RGB 分量存变量
核心是绕过“运行时解析 HEX”这个死结——提前人工或工具把 #242424 拆成 36, 36, 36，存进变量，再用 rgb() 和 rgba() 组合：
-
--dark-base: 36, 36, 36—— 只存数字，不带单位、不带括号 -
--dark: rgb(var(--dark-base))—— 复用原变量名，保持旧代码不动 -
background-color: rgba(var(--dark-base), 0.7)—— 动态透明度真正起效的地方
注意：rgba() 的第四个参数必须是 0–1 小数，不是百分比或十六进制。
别踩这些坑
- 写
#ff000080（8位HEX）？Chrome/Firefox/Safari 17.4+ 支持，但 Electron、微信 WebView、旧 Android 浏览器直接忽略后两位，变成不透明纯红 —— 必须加rgba(255,0,0,0.5)fallback - 用 Sass 的
transparentize(#ff0000, 0.3)？行，但它生成的是静态 CSS，无法响应 JS 修改的变量值 - 试图用 JS 把
var(--color)拿过来再转 RGBA？可以，但得先getComputedStyle(el).getPropertyValue('--color')，再正则校验、补零、parseInt，还要处理#f00简写和大小写 —— 容易漏空格、null、无效字符 - HSL 方案更轻？对，如果原始色本来就是 HSL（比如设计系统里定义了
--primary-h: 200），那就用hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--alpha))，比拆 RGB 更直观，也支持 hue 动画
rgba()，或者 HSL 分量变量 + hsla()。其他都是临时补丁，容易在某个环境里静默失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
