必须在 :root 里定义颜色变量，因为只有 :root 是规范指定的根作用域，能确保所有组件、shadow dom 和深层嵌套元素无条件继承，跨框架和跨 shadow dom 复用；其他选择如 .app、body 或 html 均存在作用域局限或兼容性问题。
为什么必须在 :root 里定义颜色变量
只有写在 :root 里的变量才能被所有组件、Shadow DOM 和深层嵌套元素继承。写在 .theme 或 html 里看似差不多，但 :root 是规范指定的根作用域，浏览器强制保证其后代无条件继承——这是唯一能跨框架（Vue scoped、React emotion）、跨 Shadow DOM 复用的路径。
常见错误包括：.app { --primary: #007bff; }，这种变量只在 .app 内部生效；body { --primary: ... } 在部分 Safari 版本中继承不稳定；html { --primary: ... } 虽然等价，但优先级略低于 :root，且语义不如后者清晰。
var(--color-primary) 必须带 fallback 值
裸写 color: var(--color-primary) 极其危险：变量未定义时，整条声明会被浏览器忽略，元素可能变成默认黑色或透明，UI 直接“破相”。fallback 不是可选项，是安全底线。
- fallback 只能是静态值，不能是另一个
var()或表达式，例如color: var(--color-primary, #3b82f6)合法，color: var(--color-primary, var(--fallback))无效 - 大小写敏感：
--Color-Primary和--color-primary是两个变量，拼错就回退到 fallback - 媒体查询或伪类中使用没问题，但需确保变量已在作用域内定义，比如
:root[data-theme="dark"] { --color-primary: #60a5fa; }
深色模式切换时变量没反应？检查这三处
写了 @media (prefers-color-scheme: dark) { :root { --color-primary: #fff; } } 却没生效，大概率是以下问题之一：
- 样式表加载顺序不对：暗色规则必须在基础
:root定义之后，否则被覆盖 - 作用域冲突：如果同时用了
html.theme-dark类控制主题，就得写成html.theme-dark :root { --color-primary: #fff; }，而不是仅靠媒体查询 - JS 动态改值时没走对路径：应调用
document.documentElement.style.setProperty('--color-primary', '#fff')，而不是操作某个 class 的 style 属性
注意：媒体查询内的 :root 重定义是“覆盖”，不是“条件注册”，它依赖层叠优先级，不是运行时开关。
别把 CSS 变量当 Sass 变量用
CSS 自定义属性是运行时机制，和 Sass 的 $primary-color 有本质区别——前者可被 JS 动态读写并触发重绘，后者构建后就固化为字符串。混用会导致预期外行为：
- 不能在
:root中用var(--other-var)嵌套定义主色（旧版 Safari 解析失败），如--color-text: var(--color-primary)应避免 - 不要指望用
calc()在变量值里做色彩运算（比如明度调整），CSS 不支持运行时 HSL 运算，得靠构建工具预处理或 JS 计算 - 变量名必须以
--开头，color-primary或$primary都无效；值也不能加引号，--primary: "#007bff"会解析为字符串而非颜色
真正需要动态主题的项目，变量定义位置、fallback 写法、作用域边界这三点，比颜色值本身更关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
