:root声明的CSS变量是定义在文档根元素上的全局自定义属性，以--开头（如--primary-color），全后代元素可通过var(--primary-color)读取；必须声明在:root中而非html或body，命名区分大小写，引用时须带fallback值（如var(--c, #000)），动态更新需用setProperty()。
什么是 :root 声明的 CSS 变量？
:root 是 CSS 中匹配文档根元素（通常是 <html>）的伪类，它提供的作用域等价于全局作用域。在这里用 -- 开头声明的变量（如 --primary-color）会被整个文档识别，子元素通过 var(--primary-color) 读取。
注意：CSS 变量是大小写敏感的，--Color 和 --color 是两个不同变量；且必须以 -- 开头，否则无效。
怎么在 :root 中正确声明和使用变量？
声明位置要确保被后续样式覆盖前已加载——通常放在 <style> 块顶部或独立 CSS 文件靠前位置。
-
:root声明本身不继承，但var()函数在计算时会沿 DOM 树向上查找最近的有效定义 - 支持级联和重定义：子元素可重新设置同名变量，只影响自身及后代
- 值可以是任意合法 CSS 值：
--gap: 1rem、--shadow: 0 2px 4px rgba(0,0,0,0.1)、--theme: dark - 不能直接用于属性名或选择器，仅限属性值上下文
示例：
立即学习“前端免费学习笔记（深入）”；
:root {
--text-color: #333;
--border-radius: 4px;
}
button {
color: var(--text-color);
border-radius: var(--border-radius);
}
为什么 var() 有时不生效？常见失效原因
不是语法写错，而是计算时机或作用域出问题。
- 变量名拼写错误或大小写不一致 → 浏览器静默忽略，回退到初始值或继承值
- 在
:root外声明（比如直接写在body里）→ 仅该选择器及其后代可用，非全局 - 变量值本身非法（如
--size: 12px 16px被当做一个值而非两个）→var(--size)计算失败，整条声明被丢弃 - JavaScript 动态修改时用了错误 API：
element.style.setProperty('--x', 'val')才生效，element.style['--x'] = 'val'无效
和预处理器变量（如 Sass $color）有什么本质区别？
CSS 自定义属性是运行时机制，Sass 变量是编译时替换——这意味着：
- CSS 变量可在 DevTools 中实时编辑并立即生效，Sass 变量改完必须重新编译
- CSS 变量能响应媒体查询、伪类、JavaScript 修改；Sass 变量无法在运行时改变
- CSS 变量支持 fallback 机制：
var(--color, #000)，第二参数在变量未定义时启用 - 过度嵌套
var()（如var(--a, var(--b))）可能触发循环引用，部分浏览器报错或静默失败
真正需要动态主题切换、用户偏好适配或组件级定制时，CSS 变量不可替代；纯静态配置仍可用预处理器提升可维护性。
别忘了：CSS 变量不支持 IE，如果项目还需兼容 IE11，得用 JS 注入或 PostCSS 插件降级处理——这点常被忽略，直到上线后发现按钮全变黑了。
