rgba()不能直接套用css变量，因var(--color)返回字符串而非数字；正确做法是将rgb分量存为变量再组合，或使用现代rgb()/hsl()的/语法。
rgba() 不能直接套用 CSS 变量，因为 var(--color) 是字符串
你写 background-color: rgba(var(--primary), 0.6)，浏览器会报错或静默失效——rgba() 第一个参数必须是三个数字（如 255, 100, 50），而 var(--primary) 解析出来可能是 #3498db 或 rgb(52, 152, 219)，都不是合法输入。
这是最常卡住的地方：以为变量能“无缝接入”函数，实际它只是文本替换，不参与颜色解析。
- ✅ 正确路径：把颜色拆成 RGB 分量存为变量，再拼进
rgba() - ❌ 错误尝试：
rgba(var(--primary), 0.6)、var(--primary) / 0.6（后者仅在rgb()/hsl()函数内有效） - ⚠️ 注意：HEX 值无法在运行时拆解，必须手动转 RGB 并存为数字序列
用 --color-base 存 RGB 分量，再组合 rgba()
比如主色是 #3498db，先转成 RGB 是 52, 152, 219，然后定义：
:root {
--primary-base: 52, 152, 219;
--primary: rgb(var(--primary-base));
}
这样既保留了原色复用（color: var(--primary)），又支持透明背景：
.overlay {
background-color: rgba(var(--primary-base), 0.7);
}
- 所有使用
--primary的地方仍显示不透明纯色 -
--primary-base只用于需要透明度的场景，职责清晰 - 别把逗号写成中文顿号，也别加空格——
52,152,219才是标准格式
现代写法：用 rgb() / hsl() 的 / 语法替代 rgba()
如果你的项目兼容 Chrome 100+、Firefox 105+、Safari 16.4+，直接用空格 + / 更简洁：
:root {
--primary: hsl(210 80% 60%);
}
.card {
background-color: var(--primary) / 0.4;
}
这等价于 hsla(210, 80%, 60%, 0.4)，但不用改函数名，也不依赖分量变量。
- ⚠️ 必须确保
--primary是rgb()或hsl()格式，不是 HEX - ❌
rgb(255, 0, 0) / 0.5无效——逗号语法不支持/，得写成rgb(255 0 0 / 0.5) - ✅ 推荐统一用空格分隔：
rgb(255 0 0 / 0.5)、hsl(0 0% 0% / 0.8)
主题切换时透明度要独立控制，别和颜色耦合
深色模式下，同样的 rgba(0, 0, 0, 0.5) 遮罩层可能太重，而浅色模式下又太轻。这时候不能只调 alpha，得让 alpha 本身成为可变量：
:root {
--mask-alpha: 0.6;
}
@media (prefers-color-scheme: dark) {
:root {
--mask-alpha: 0.4;
}
}
.overlay {
background-color: rgba(0, 0, 0, var(--mask-alpha));
}
- 透明度值必须单独抽离，不能硬编码在
rgba()里 - 如果用了
/语法，同样适用：hsl(0 0% 0% / var(--mask-alpha)) - 别试图用 JS 动态改
style.setProperty('--primary', '...')来更新透明色——CSS 变量不支持运行时解析颜色，只能预设好分量或用/语法
/ 语法是唯二靠谱路径，其他都是临时补丁。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
