CSS变量定义颜色时不可加引号，必须用var()调用，否则失效；十六进制透明色#rrggbbaa需注意浏览器兼容性，旧版Safari需用rgba+分离变量实现。
直接赋值不加引号，调用必须用 var()，否则颜色不会生效。
定义变量时千万别加引号
CSS变量存储十六进制颜色，本质是存一个合法的颜色值，不是字符串。加引号会让浏览器把它当纯文本，后续用在 color 或 background-color 里就静默失败。
- 错误写法：
--color-primary: "#3b82f6";→ 解析为字符串，color: var(--color-primary)渲染成黑色或默认色 - 正确写法：
--color-primary: #3b82f6;→ 浏览器识别为颜色，可直接参与计算和继承 - JS 动态设置也要注意：
el.style.setProperty('--c', '#3b82f6')，不能传'"#3b82f6"' - 所有颜色形式同理：关键字（
red）、函数（rgb(255, 130, 60)、hsl(20, 100%, 50%)）都不加引号
使用变量必须显式调用 var()
变量只是容器，CSS 不会自动展开它。漏掉 var() 或拼错名字，声明就无效，浏览器回退到属性默认值（比如 color 变成黑色）。
- 正确：
color: var(--color-primary);、border-color: var(--color-primary); - 错误：
color: --color-primary;（语法非法）、color: var(--color-prmiary);（拼写错，无 fallback 时失效） - 推荐加 fallback：
color: var(--color-primary, #000);，变量未定义时保底用黑色 -
var()不能用在@media条件或选择器中，例如@media (min-width: var(--breakpoint))是非法的
带透明度的十六进制怎么写才安全
现代浏览器支持 8 位写法 #rrggbbaa，但 Safari ≤15 和 IE 完全不认。是否可用，取决于你的兼容性要求。
立即学习“前端免费学习笔记（深入）”；
- 想用
#rrggbbaa：确保目标环境是 Chrome 65+ / Firefox 62+ / Safari 16+ / Edge 79+，且值严格连续无空格，如--primary: #3b82f680; - 要兼容旧 Safari：拆成 RGB + alpha 变量，例如
--primary-r: 59; --primary-g: 130; --primary-b: 246; --primary-alpha: 0.5;，再写background-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), var(--primary-alpha)); - 别混用单位：
--alpha: 0.5和--alpha: 50%效果不同，rgba()只接受小数，百分比会失效 - Alpha 值换算记住几个关键点：
FF= 100% 不透明，80≈ 50% 不透明（即 50% 透明），00= 完全透明
真正容易被忽略的是：变量值本身没有“类型”，#3b82f680 在 CSS 里仍是字符串，只是浏览器在解析 color 属性时按 Color Level 4 规则尝试解释它——这个过程完全静默，出错也不报错，只能靠肉眼或 DevTools 的 computed 样式去核对最终生效的值。
