css变量存储十六进制颜色值时不可加引号，否则被解析为字符串失效；使用时必须通过var()函数调用，并注意作用域、fallback、动画限制及运行时静默错误。
CSS变量可以安全存储十六进制颜色值，但必须确保赋值时不含引号，否则会被当作字符串而非颜色解析。
定义 CSS 变量时不要加引号
十六进制颜色（如 #3b82f6）是有效的 CSS 颜色值，直接赋给 --color-primary 这类自定义属性即可。加引号会把它变成字符串，在 color、background-color 等属性中无法生效。
错误写法（颜色不生效）：
:root {
--color-primary: "#3b82f6"; /* ❌ 字符串，不是颜色 */
}
正确写法：
:root {
--color-primary: #3b82f6; /* ✅ 直接赋值 */
}
- 所有标准颜色关键字（
red、transparent）、函数（rgb()、hsl()）也同理，不加引号 - 如果变量值来自 JS 动态注入，需确保 JS 中未额外包裹引号（例如
el.style.setProperty('--c', '#3b82f6')，不是'"#3b82f6"'）
在不同 CSS 属性中调用变量要带 var()
变量本身只是“存储”，实际使用必须通过 var(--color-primary) 函数读取。漏掉 var() 或拼错变量名会导致回退到初始值或无效声明。
示例：
.btn {
color: var(--color-primary); /* ✅ 正确 */
background-color: var(--color-primary); /* ✅ 同样适用 */
border: 1px solid var(--color-primary); /* ✅ */
/* color: --color-primary; ❌ 这是无效语法 */
}
-
var()支持第二个参数作为 fallback（如var(--color-primary, #000)），当变量未定义时启用 - 不能在
@media查询条件或选择器中直接用变量（如@media (min-width: var(--breakpoint))是非法的）
注意变量作用域与继承行为
CSS 变量遵循级联与作用域规则：在 :root 定义是全局的；在某个选择器内定义（如 .card { --color-bg: #f9fafb; }）只对该元素及其后代生效。
常见陷阱：
- 在子元素中修改变量，父元素不会感知（变量不是响应式绑定，而是静态计算）
- 伪元素（
::before）能继承父元素变量，但若父元素未显式设置且无全局定义，就会回退到 fallback 或默认值 - 动画中无法直接对 CSS 变量做过渡（
transition: --color-primary 0.3s无效），需配合color等实际属性触发
真正容易被忽略的是：变量值在计算时才解析为颜色，所以即使你写 --c: #ff0000; background: var(--c);，浏览器也是先查变量、再校验是否为合法颜色值——这意味着拼写错误（比如 #ff000g）会在运行时静默失败，控制台不报错，但样式不生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
