一、什么是 CSS 变量？
CSS 变量（Custom Properties）是 CSS3 引入的一项强大功能。它允许开发者在样式表中定义可复用的值，并能在不同选择器、不同作用域下灵活使用和覆盖。CSS 变量极大地提升了样式的可维护性和灵活性，特别适合主题切换、响应式设计以及大型项目的统一风格管理。例如，当你需要更改全站的主色调时，只需修改一处变量定义，所有引用该变量的地方都会自动更新，无需逐一查找和替换。
二、命名和使用规则
命名规则：
- 必须以
--开头，表示这是一个自定义属性。 - 变量名建议由多个单词组成时使用连字符（-）连接，例如
--main-color，以增强可读性。 - 变量名区分大小写，但通常建议全部小写并用连字符分隔，便于团队协作和维护。
使用方法：
-
通过
var(--name, [fallback])语法调用变量。- 第一个参数是变量名，必须以
--开头。 - 第二个参数是可选的默认值（fallback），当变量未定义时会使用该值。
- 第一个参数是变量名，必须以
示例：
:root {
--brand-color: #1677ff;
--radius-md: 8px;
}
.button {
background: var(--brand-color);
border-radius: var(--radius-md);
}
在上述例子中，:root 选择器定义了全局变量，.button 类可以直接引用这些变量，实现样式的统一和复用。
三、变量作用域与继承
1. 全局变量
在 :root（即 HTML 根元素）下定义的变量为全局变量，页面任意位置都能访问。例如：
:root { --text-color: #333; }
无论在页面的哪个元素中，只要使用 var(--text-color)，都能获取到该值。
2. 局部变量
在某个选择器下定义的变量为局部变量，仅该元素及其后代元素可以访问。例如：
.card { --text-color: #222; }
.card p { color: var(--text-color); }
这里，.card 元素及其子元素（如 p 标签）会使用 .card 作用域下的 --text-color 值，而不会受到全局变量的影响。
3. 继承与覆盖
CSS 变量具有天然的继承性。子元素会自动继承父元素定义的变量值，但如果子元素或更具体的选择器重新定义了同名变量，则会覆盖父级变量。这一覆盖规则遵循 CSS 的特异性和层叠原则。例如：
:root { --main-color: #333; }
.header { --main-color: #1677ff; }
.header h1 { color: var(--main-color); }
在这个例子中，.header h1 会使用 .header 作用域下的 --main-color，而不是全局的。
四、fallback 的妙用
var() 的第二个参数可以设置默认值（fallback），用于变量未定义时的兜底。例如：
color: var(--main-color, #000);
如果 --main-color 未定义，就会使用 #000 作为默认颜色。你还可以多级嵌套 fallback：
color: var(--btn-fg, var(--text-color, #222));
这样即使 --btn-fg 和 --text-color 都未定义，也能保证样式不会出错，始终有一个兜底值。
五、应用场景与优势
CSS 变量非常适合用于主题切换、响应式设计、组件库开发等场景。通过灵活地定义和覆盖变量，可以轻松实现暗黑/明亮主题、动态调整间距或颜色等需求。相比于预处理器（如 Sass、Less）的变量，CSS 变量具备实时响应和作用域灵活的优势，能与 JavaScript 动态配合，极大提升前端开发效率和用户体验。
