CSS变量需定义在:root中才能全局生效，fallback仅支持字面量值，JS通过document.documentElement.style.setProperty可动态更新，IE不支持var()需手动提供降级样式。
var() 函数必须配合 :root 声明才能全局复用
直接在普通选择器里定义 --color-primary，var(--color-primary) 在子元素里大概率失效——因为 CSS 变量作用域是“声明所在的选择器及其后代”，只有写在 :root 里才等效于全局变量。
正确做法是把所有基础变量统一塞进 :root 块：
:root {
--color-primary: #3498db;
--spacing-md: 1rem;
--border-radius-sm: 4px;
}之后任意地方都能用 var(--color-primary)，包括伪元素、媒体查询、@supports 内部。
var() 的 fallback 值不是“备选变量”，而是字面量兜底
很多人误以为 var(--color-text, --color-fallback) 能链式回退到另一个变量，实际第二个参数只能是具体值（颜色、长度、数字等），且不支持嵌套 var()。浏览器遇到未定义变量时，会直接用这个 fallback，不会再去解析它。
-
color: var(--text-color, #333);✅ 合法，未定义--text-color时显示灰色 -
color: var(--text-color, var(--fallback-color));❌ 语法错误，第二个参数不能是函数 -
padding: var(--space-lg, 1.5rem);✅ 单位必须显式写出，不能省略
动态修改 :root 变量时，所有引用处自动重计算
JS 修改 :root 变量后，所有用 var() 引用它的样式会立即更新，无需手动刷新或重排版。但要注意操作方式：
立即学习“前端免费学习笔记（深入）”；
- 用
document.documentElement.style.setProperty('--color-primary', '#e74c3c');—— 正确，作用于根元素 - 用
document.body.style.setProperty('--color-primary', '...');—— 错误，只影响 body 及其后代，:root不变 - 批量改多个变量？一次 setProperty 比循环调用更高效，避免多次重排
IE 不支持 var()，连降级方案都要手动写
IE 完全无视 var()，也不会忽略整条声明——它会把 color: var(--c, #000); 当作无效声明，直接跳过，导致样式丢失。必须显式写 fallback：
.btn {
color: #3498db; /* IE 和旧浏览器用这个 */
color: var(--color-primary, #3498db); /* 现代浏览器覆盖 */
}注意顺序：fallback 必须写在 var() 前面，CSS 解析器按从上到下取第一个有效值。autoprefixer 无法自动补 fallback，这事得自己盯住。
