CSS变量无法直接调用rgba()等函数加透明度，因var()返回字符串而非颜色值；需在编译期（Sass/Less）用transparentize()或fade()，或运行时拆RGB分量定义为--r,--g,--b后配合rgba(var(--rgb),a)，或使用现代rgb(r g b / a)语法（前提变量本身为RGB/HSL格式）。
不能直接对已定义的 CSS 变量（比如 --primary: #3498db）调用函数动态加透明度——CSS 本身没有运行时颜色计算能力，所有“动态”都必须在编译期（Sass/Less）或通过 JS 实现。
为什么 rgba(var(--color), 0.5) 会失败
因为 var(--color) 解析出来是字符串 "#3498db"，而 rgba() 第一个参数要求是数字三元组或已解析的颜色值，不是字符串。浏览器会静默忽略该声明，或报错 Invalid property value。
- 常见错误写法：
background-color: rgba(var(--primary), 0.5); - 即使用了
hsl()或rgb()包裹变量，只要变量值是 HEX 字符串，就无法被函数识别 - PostCSS 插件（如
postcss-color-function）可部分支持，但需额外配置且不覆盖所有场景
Sass 中用 transparentize() 或 fade() 安全降级
这是最可控、零 runtime 成本的方式，适用于主题色预生成场景。
-
transparentize($color, $amount)：输入 Sass color 类型（如$primary: #3498db），$amount是 0–1 小数，表示“增加多少透明度”，即最终 alpha =1 - $amount -
fade($color, $percent)（Less）：$percent是 0–100 整数，表示目标不透明度百分比，fade(#000, 30)→rgba(0,0,0,0.3) - 务必确保源变量是未引号的 color 类型：
$primary: #3498db✅，不是$primary: "#3498db"❌ - 避免嵌套调用：不要
transparentize(transparentize($c, 0.2), 0.1)，语义混乱且结果非线性
CSS 运行时方案：拆 RGB 分量 + rgba()
当必须用 CSS 变量且需 runtime 透明度（例如配合 backdrop-filter），唯一可靠路径是把颜色存为 RGB 数字分量。
立即学习“前端免费学习笔记（深入）”；
- 把
#242424拆成--dark-base: 36, 36, 36，然后用background-color: rgba(var(--dark-base), 0.7) - HEX 转 RGB 可借助在线工具或构建脚本，不可手算（尤其带透明度的 RGBA 原始值）
- 此法不兼容 IE 和旧 Android WebView，但 Chrome 111+ / Firefox 110+ / Safari 16.4+ 全支持
- 注意：不能用于
border-color等不接受rgba()的属性（除非显式写成border-color: rgb(var(--base) / 0.5)）
现代 CSS 的 / 语法：简洁但有前提
rgb(255 0 0 / 0.4) 或 hsl(210 80% 60% / 0.3) 是目前最干净的写法，但它只适用于你**能直接写出 RGB/HSL 值**的场景。
- 它不能作用于
var(--primary)，除非你提前把--primary定义为hsl(210 80% 60%)而非 HEX -
/后的 alpha 支持小数（0.4）或百分比（40%），但不能混用单位；亮度/饱和度值必须带% - 和
opacity的关键区别：它只改颜色通道，不影响子元素——这点在遮罩层、禁用态按钮中极易被忽略
真正难的不是选哪种方法，而是明确你的“动态”发生在哪个阶段：编译期？构建期？还是用户交互瞬间？选错层级，后面所有技巧都是徒劳。
