:root定义变量不是全局提升，而是CSS继承链的起点，依赖运行时层叠与继承，不支持编译期替换、条件判断或跨Shadow DOM自动传递。
:root 里定义变量 ≠ 全局“提升”，它只是 CSS 作用域规则下的最高层继承起点，不是编译期的变量注入。
为什么 :root 声明不等于 Sass 的变量提升
Sass 变量在编译时被文本替换，$color: red 会直接展开成 color: red；而 :root { --color: red } 是运行时解析的自定义属性，它依赖 CSS 层叠与继承机制生效。关键区别在于：
-
:root变量不会“冒泡”到父元素（比如<html>外的<head>或 JS 作用域） - 它不能用于
@import、@media条件判断或选择器逻辑中（例如div[style*="--primary"]无效） - 声明顺序不影响覆盖——同级
:root块内后声明的变量会覆盖先声明的，但跨文件时取决于 CSS 加载顺序和 specificity
:root 是唯一可靠的“全局”作用域起点
浏览器把 :root 视为文档根元素（即 <html>），所有后代元素默认继承其自定义属性值。这是最接近“全局变量”的标准做法：
- 必须用
--开头：--primary-color合法，-primary-color或primary-color会被忽略 - 推荐集中写在主 CSS 文件顶部或单独的
_variables.css中，避免散落各处导致维护困难 - 不要在
<style>标签外、或未挂载到 DOM 的元素上尝试声明——变量只在匹配的选择器作用域内注册
常见错误：以为写了 :root 就万事大吉
实际项目中最容易踩的坑不是语法，而是对“全局”的误解：
- 在 Shadow DOM 内部未显式继承：
:host { --color: blue; }不会自动传入 slot 内容，需手动inherit或重设 - 动态插入的元素（如
innerHTML创建的）能读取:root变量，但若父容器有同名局部变量（如.card { --color: green; }），则优先使用局部值 - SSR 场景下，服务端渲染的 HTML 若没带
:root声明，客户端 JS 修改document.documentElement.style.setProperty会导致首次渲染缺失样式 - IE 完全不支持，
caniuse.com显示兼容性从 Chrome 49 / Firefox 31 / Safari 9.1 开始，无 polyfill 可靠方案
真正需要“提升”的地方：主题切换与响应式断点
如果你的目标是像 Sass 那样统一管理主题色或断点，:root + 类名切换才是正解，而非幻想变量能穿透所有上下文：
立即学习“前端免费学习笔记（深入）”；
- 用
html[data-theme="dark"]覆盖:root变量，而不是反复调用setProperty - 媒体查询中重写变量值：
@media (min-width: 768px) { :root { --spacing-unit: 1.5rem; } }，注意它只影响匹配视口下的计算结果 - 避免在
@keyframes里直接引用未绑定到动画属性的变量——background-color: var(--bg)才会触发动画，--bg本身不会
:root { --x: y }，都隐含了对整个 DOM 树继承路径的信任。一旦中间某个组件用 all: unset 或 inherit: none 截断了继承，变量就消失了——这不是 bug，是设计使然。 
