css变量需用var(--name)配合:root定义，支持作用域覆盖、fallback链和js动态修改，但不兼容ie，且不能用于@keyframes或content属性。
var() 函数必须搭配 -- 自定义属性使用
单独写 var(--color) 不会生效，前提是页面中已正确定义了 --color。最稳妥的全局定义位置是 :root，它等价于 html 元素，且优先级高于直接写在 html 上的内联样式。
常见错误现象：页面没变色、控制台无报错但样式未应用——大概率是变量根本没被定义，或拼写大小写不一致（--PrimaryColor ≠ --primaryColor）。
-
:root中定义的变量对整个文档有效，子元素可直接var(--x)引用 - 局部作用域（如
.theme-dark）里重定义同名变量，会覆盖上级作用域的值，靠 CSS 选择器权重和嵌套层级生效 - 变量名允许中文、下划线、短横线，但禁止
$、[、%等特殊字符
主题切换必须靠 JS 修改 :root.style.setProperty()
纯 CSS 无法“切换”主题——媒体查询只能响应屏幕尺寸，不能响应用户点击。真正切换主题的动作，得由 JS 触发，修改 :root 上的变量值。
示例操作：
document.documentElement.style.setProperty('--bg-color', '#1a1a1a');
document.documentElement.style.setProperty('--text-color', '#e0e0e0');
注意点：
- 不要用
document.querySelector('html').style.setProperty(...)，document.documentElement才是标准写法 - 避免在循环或高频事件中反复调用，可能触发重排；批量修改建议用
cssText或一次性 set 多个 - 如果主题需持久化（刷新不丢失），记得配合
localStorage读写，比如存theme: 'dark'，再根据值设对应变量
回退值 fallback 不是摆设，而是容错关键
var(--main-color, #333) 的第二个参数不是“备用色”，而是“兜底保障”。当变量未定义、拼错、或 JS 动态设置失败时，它防止样式完全失效。
更实用的写法：
- 嵌套回退：
color: var(--text-primary, var(--text-base, #222))，形成 fallback 链 - 支持逗号分隔多个值：
background: var(--bg-img, linear-gradient(to right, #f00, #00f), none) - 单位不能紧贴
var()后面，font-size: var(--size)px是无效的；必须用calc(var(--size) * 1px)或直接定义带单位的变量（如--size: 16px）
媒体查询中定义变量容易被忽略兼容性细节
你可以在 @media 块里重新给 :root 赋值，实现响应式主题微调，例如暗色模式 + 宽屏适配：
@media (prefers-color-scheme: dark) and (min-width: 768px) {
:root {
--card-shadow: 0 4px 12px rgba(0,0,0,0.3);
--border-radius: 12px;
}
}
但要注意：
- IE 完全不支持
--和var()，哪怕加了 polyfill 也难保行为一致；当前全球兼容性约 94%，但企业内网仍可能遇到旧版 Edge 或定制浏览器 -
@media中的变量定义，只在匹配条件下生效；未匹配时，仍沿用上一个有效定义（可能是:root初始值） - 不要指望
var()在@keyframes或伪元素::before的content中工作——它们不支持计算值
CSS 变量真正的复杂点不在语法，而在「作用域叠加」和「动态更新时机」：同一个变量在 :root、某个 class、@media、内联 style 里各定义一次，最终取哪个，取决于选择器匹配顺序与层叠规则，而不是 JS 调用先后。调试时别只看 JS 是否执行了 setProperty，更要检查 computed styles 里该变量是否真的出现在生效的 rule 中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
