必须将hex色拆解为纯数字rgb分量变量（如--r: 59; --g: 130; --b: 246;），再通过rgba(var(--r), var(--g), var(--b), var(--alpha, 0.8))动态合成带透明度的背景色，此方案兼容现代浏览器且支持js运行时独立控制alpha。
直接用 --color-rgb 存RGB分量，再配合 rgba() 动态套alpha
CSS变量本身不支持“在引用时动态修改透明度”，所以不能写 background-color: var(--primary) 0.7;——这语法根本无效。真正能落地的方案是把HEX色拆成R/G/B三个数字变量，让rgba()函数在运行时组合。
常见错误现象：试图用var(--primary)直接塞进rgba()的前三个参数位置，比如rgba(var(--r), var(--g), var(--b), 0.6)，结果浏览器报错或渲染为黑色/透明块。
-
--primary-r: 59;、--primary-g: 130;、--primary-b: 246;—— 这三个必须是纯数字（无单位、无引号） - 使用时写
background-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), var(--alpha, 0.8)); - 如果原始色是
#3b82f6，可用在线工具或脚本一次性转出对应RGB值，别手算 - 注意：Chrome/Firefox/Safari 均支持这种写法，但IE完全不支持，如需兼容IE请放弃此方案
用 color-mix() + transparent 模拟透明度（Dart Sass编译期不适用）
color-mix() 是CSS Color Level 5的新特性，能在运行时混合颜色与透明，但它不是“设alpha”，而是按比例叠加，效果接近但不等价于rgba()。它适合渐进增强场景，但不能替代RGB变量方案。
典型误用：以为color-mix(in srgb, var(--primary) 70%, transparent 30%)等于rgba(..., 0.7)——实际结果受色彩空间影响，尤其在深色背景下偏灰、饱和度下降。
- 仅适用于现代浏览器（Chrome 111+、Safari 16.4+、Firefox 110+）
- 不能用于
@media (prefers-color-scheme: dark)中做条件覆盖，因为color-mix()不参与CSS变量继承链计算 - 若你已在用Dart Sass预编译，这个函数完全不会被处理，它只在浏览器渲染阶段生效
为什么不用 transparentize() 或 opacify()？
这两个是Sass函数，不是CSS原生能力，且名字极具误导性：transparentize(#ff0000, 0.2) 不是“把红色变80%不透明”，而是mix(#000000, #ff0000, 20%)——即加20%黑，结果是暗红#cc0000，色相和亮度全变了。
如果你的目标是“保持原色只调透明度”，它们从原理上就不匹配。
- 所有Sass颜色函数都在编译期执行，无法响应CSS变量变化
- 一旦用了
transparentize()，你就失去了对alpha通道的独立控制权，也无法用JS动态改--alpha - 深色模式下这类混合更容易导致对比度不足，WCAG合规风险升高
JS运行时改透明度，别拼字符串，优先改CSS变量
硬拼element.style.backgroundColor = `rgba(${r}, ${g}, ${b}, ${a})`看似简单，实则破坏样式系统：绕过CSS变量机制、无法被@media或:root[data-theme]接管、每次更新触发重排。
正确做法是只动一个变量，让CSS自己完成组合。
- 定义
--bg-r: 255; --bg-g: 255; --bg-b: 255; --bg-alpha: 0.3; - CSS里写
background-color: rgba(var(--bg-r), var(--bg-g), var(--bg-b), var(--bg-alpha)); - JS只需
el.style.setProperty('--bg-alpha', '0.8');，其余全由浏览器计算 - 如需批量控制，用
document.documentElement.style.setProperty()统一注入
最易被忽略的一点：RGBA中的RGB分量变量必须是整数，小数会四舍五入但不可控；如果原始HEX来自设计系统导出（比如Figma插件生成），务必检查是否含小数点或空格——这些都会让rgba()解析失败，最终 fallback 成黑色或透明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
