应使用 :root 伪类定义全局 CSS 变量，如 --primary-color: #3498db；所有元素通过 var(--primary-color) 复用，支持嵌套、fallback 和响应式重设，命名推荐语义化优先。
怎么用 :root 定义全局颜色变量
统一颜色的前提是把颜色值抽出来，放在一个地方管理。CSS 变量最稳妥的定义位置是 :root 伪类——它等价于 html 元素，作用域覆盖整个文档，所有后代元素都能访问。
别在某个 class 里定义 --color-primary，否则其他地方用不到；也别漏掉 : 前缀，写成 color-primary 就不是变量了。
- 必须用双破折号开头：
--primary-color，不能是primary-color或$primary-color - 推荐在
标签顶部或独立 CSS 文件开头集中声明，方便查找和维护 - 值可以是任何合法 CSS 值：
#3498db、hsl(200, 100%, 50%)、甚至var(--text-color)（支持嵌套）
:root {
--primary-color: #3498db;
--text-color: #2c3e50;
--bg-color: #ecf0f1;
}
多个元素如何复用同一个 var()
只要变量已定义，任何支持自定义属性的 CSS 属性都可以用 var(--xxx) 引入。不用重复写颜色值，改一处，全盘生效。
注意：var() 是函数调用语法，括号不能省；变量名必须和定义时完全一致（区分大小写）；如果变量未定义，会回退到后续声明的值或浏览器默认值。
立即学习“前端免费学习笔记（深入）”；
-
color、background-color、border-color、box-shadow等都支持 - 可配合
fallback值防错：var(--primary-color, #007bff)，变量不存在时用备选色 - 不要在
@media外直接给:root赋新值——那只是覆盖，不是响应式；想动态换肤，得在媒体查询内重设变量
.btn {
background-color: var(--primary-color);
color: var(--text-color);
}
.header {
border-bottom: 2px solid var(--primary-color);
}
.card {
background-color: var(--bg-color);
color: var(--text-color);
}
为什么修改 :root 变量后部分样式没更新
常见原因是变量名拼错、作用域错误，或 CSS 优先级覆盖了 var() 结果。CSS 变量本身不触发重绘，但它的值被使用时，浏览器会按常规层叠规则计算最终样式。
- 检查控制台是否报
Invalid property name或警告“variable is not defined”——说明var(--xxx)中的xxx名字对不上 - 用 DevTools 的“Computed”面板点开某元素，搜索
var，看最终解析出的颜色值是多少，确认是否真被替换 - 如果某个元素写了
color: red !important，它会压过color: var(--text-color)，哪怕变量值是#2c3e50 - 变量支持继承，但
background-color不继承，所以子元素要显式声明var(--bg-color)，不能指望父级传下来
要不要用预处理器变量替代 CSS var()
别混用。Sass/Less 的 $color-primary 是编译时替换，生成的是静态 CSS；而 var(--primary-color) 是运行时生效，支持 JS 动态修改、主题切换、用户偏好适配（比如 @media (prefers-color-scheme: dark) 内重设）。
- 需要夜间模式、用户可调主题、A/B 测试配色 → 必须用 CSS 变量
- 纯构建期配置、无交互需求、老项目兼容 IE → 可用预处理器，但无法热更新
- 两者可共存：用 Sass 管理设计系统 token，再输出为
:root中的 CSS 变量，兼顾开发体验与运行时能力
真正麻烦的不是写法，而是变量命名粒度——--blue-500 和 --primary 该选哪个？前者利于设计系统扩展，后者更语义化。实际项目里，建议先按语义建模（主色、文字、背景），再按需补充色阶变量，别一上来就塞 20 个 --gray-100 到 --gray-900。
