CSS变量不解析函数，--color: rgba(255,0,0,0.5)仅存为字符串，rgba(var(--color),0.8)会展开为非法语法；唯一可靠方案是拆分为--r、--g、--b和--alpha四个独立变量，再组合使用。
为什么 --color 直接加 rgba() 会失效
CSS 变量本身不解析函数，只做纯字符串替换。当你写 --color: rgba(255, 0, 0, 0.5)，变量值确实是字符串 "rgba(255, 0, 0, 0.5)"，但若后续用它拼接其他颜色函数（比如 background: rgba(var(--color), 0.8)），浏览器会报错——因为 var(--color) 展开后变成 rgba(rgba(255, 0, 0, 0.5), 0.8)，语法非法。
拆分 RGB 分量是唯一可靠方案
把颜色拆成 --r、--g、--b 三个数字变量，再配合独立的 --alpha，就能在任意位置安全组合出 rgba() 或 hsla()。这是目前最兼容、最可控的方式。
-
--r: 255、--g: 99、--b: 71、--alpha: 0.7 - 使用时：
color: rgba(var(--r), var(--g), var(--b), var(--alpha)) - 支持 calc：
--alpha: calc(0.5 + 0.2)，也支持媒体查询动态改值 - 不能写成
--rgb: 255, 99, 71后再拼接，因为var(--rgb)会被当单个字符串，rgba(var(--rgb), 1)仍非法
如何从 HEX 或命名色自动提取 RGB
手动算 RGB 不现实，尤其要维护多主题时。推荐两种实操路径：
- 构建时处理：用 PostCSS 插件（如
postcss-css-variables配合自定义 transform）把--primary: #ff6347编译为--r: 255、--g: 99、--b: 71 - 运行时 JS 辅助：用
window.getComputedStyle读取当前--primary的计算值（会转成rgb(255, 99, 71)），再正则提取数字，设回对应变量——适合需要动态换肤的场景 - 注意：CSS 自带的
color-mix()或color()函数暂不支持变量输入，别白费劲试
透明度单独抽离带来的副作用
拆开后，你得同步管理四组变量，而不是一个。容易漏改或值不一致。
立即学习“前端免费学习笔记（深入）”；
- 建议用 CSS 层级约束：把基础色定义在
:root，透明度覆盖写在组件选择器里，避免全局污染 - 慎用
!important覆盖--alpha，它会破坏 cascade 逻辑，调试时难定位 - 如果项目用 Tailwind，别试图用
bg-[rgba(var(--r),var(--g),var(--b),0.3)]这种写法——它不会被 JIT 引擎识别，生成不了对应 class
