css变量无法直接为#rrggbb加透明度，因变量存储的是字符串而非颜色值；rgba()不接受十六进制字符串，color-mix()和color()函数兼容性差；最稳妥方案是手动拆分为--r/--g/--b三变量并用rgb()/rgba()调用。
为什么不能直接给CSS变量里的#RRGGBB加透明度
CSS变量本身只是字符串容器，--color: #3498db 存进去的是一串字符，不是颜色值。你没法在color: var(--color)80里“拼接”透明度，浏览器不认这种写法；用rgba(var(--color), 0.8)也报错——rgba()第一个参数必须是数字或颜色关键字，不接受十六进制字符串。
把#RRGGBB拆成--r/--g/--b三变量是最稳的方案
手动把十六进制转为十进制，存进独立变量，再用rgb()或rgba()调用。虽然要算一次，但兼容性好（所有支持CSS变量的浏览器都支持rgb()），且后续改透明度只需动一个参数。
-
--primary-r: 52（对应#34） -
--primary-g: 152（对应#98） -
--primary-b: 219（对应#db） - 使用：
color: rgb(var(--primary-r), var(--primary-g), var(--primary-b)); - 加透明度：
background-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.7);
用color-mix()或color()函数？目前别依赖
color-mix(in srgb, var(--color) 70%, white) 看似能模拟透明度，但它混合的是颜色，不是alpha通道，结果和rgba()不同；color(from var(--color) r g b / 0.6)语法虽规范，但截至2024年中，Chrome仅部分支持，Firefox/Safari基本不支持。线上项目优先选RGB拆分法。
自动化拆分可以用PostCSS或构建时脚本，但别在CSS里实时解析
有人想用calc()配合string()函数反向解析#abc——目前没有标准CSS函数能做十六进制字符串解析。真要动态处理，得靠JS：读取getComputedStyle拿到变量值，用正则提取RR/GG/BB，parseInt(x, 16)转十进制，再设新变量。但这就脱离了纯CSS逻辑，适合主题切换等少数场景。
最常被忽略的是：RGB变量命名要统一作用域。比如--btn-bg-r和--header-text-r混用同一组RGB变量，后期维护容易误改。建议按语义+颜色名分组，比如--color-primary-r、--color-danger-r，而不是按组件命名。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
