CSS变量（自定义属性）详解：语法、特性与实战应用指南

在现代前端开发中，CSS代码往往会随着项目规模扩大而变得复杂。例如同一个颜色、间距或字体大小可能在多个文件中重复出现，一旦需要修改就必须全局搜索替换。为了解决这种问题，CSS引入了自定义属性（自定义属性），也被称为CSS变量。通过CSS变量，开发者可以将常用的值集中管理，并在整个样式表中复用，从而提高代码的可维护性和一致性。

本文将系统介绍CSS变量的基本语法、核心特性以及实际应用场景。

CSS变量的基本语法

CSS变量的定义非常简单，其名称必须以两个短横线 -- 开头，然后在样式规则中定义具体的值。随后可以通过 var() 函数来引用这个变量。

1. 定义变量

:root {
  --main-color: #3498db;
  --font-size-base: 16px;
}

在这个例子中：

--main-color 表示主色
--font-size-base 表示基础字体大小

通常建议把全局变量定义在 :root 选择器中，这样整个页面都可以使用这些变量。

2. 使用变量

body {
  color: var(--main-color);
  font-size: var(--font-size-base);
}

var() 函数用于获取变量值，并将其插入到CSS属性中。

3. 设置默认值（Fallback）

如果变量未定义，可以提供备用值：

color: var(--text-color, #333);

当 --text-color 不存在时，浏览器会使用 #333 作为默认值。

CSS变量的重要特性

CSS变量与传统编程语言中的变量略有不同，它们拥有一些独特的机制。

1. 支持层叠（Cascade）

CSS变量遵循CSS层叠规则，不同选择器中的变量会根据优先级决定最终值。

:root {
  --theme-color: blue;
}

.header {
  --theme-color: red;
}

.header h1 {
  color: var(--theme-color);
}

在 .header 内部使用时，变量值会变成 red。

2. 具有继承特性

默认情况下，CSS变量会从父元素继承到子元素。

.container {
  --box-color: teal;
}

.box {
  background: var(--box-color);
}

.box 会继承 .container 中定义的变量。

3. 作用域（Scope）控制

变量的作用范围由选择器决定：

.card {
  --card-padding: 20px;
}

.card-content {
  padding: var(--card-padding);
}

只有 .card 内部的元素才能使用该变量。

4. 动态修改

CSS变量最大的优势之一是可以通过 JavaScript 动态修改。

document.documentElement.style.setProperty(
  '--main-color',
  '#ff6600'
);

这样整个网站的主色调就可以实时变化，非常适合主题系统。

CSS变量的实际应用示例

1. 统一网站主题颜色

:root {
  --primary-color: #4CAF50;
  --secondary-color: #2C3E50;
}

.button {
  background: var(--primary-color);
}

.footer {
  background: var(--secondary-color);
}

如果需要更换主题，只需修改 :root 中的变量即可。

2. 实现暗黑模式（Dark Mode）

CSS变量在暗黑模式实现中非常常见。

:root {
  --bg-color: #ffffff;
  --text-color: #333;
}

.dark {
  --bg-color: #121212;
  --text-color: #eee;
}

body {
  background: var(--bg-color);
  color: var(--text-color);
}

通过切换 dark 类名即可实现整站主题切换。

3. 组件设计系统（Design System）

大型项目通常会建立一套设计变量。

:root {
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
}

.card {
  padding: var(--spacing-md);
}

.section {
  margin-bottom: var(--spacing-lg);
}

这种方式可以保证整个网站的间距和布局统一。

CSS变量的使用建议

在实际开发中，CSS变量通常用于以下场景：

网站主题系统（Theme）
暗黑模式（Dark Mode）
设计系统（Design Tokens）
响应式布局变量
组件化样式管理

相比传统CSS写法，CSS变量可以显著提高代码的可维护性，并减少重复样式。

总结

CSS变量（自定义属性）为前端开发带来了更强的样式管理能力。通过 --变量名定义变量，并使用 var() 调用，可以实现样式复用、主题切换和动态更新。它不仅支持继承和层叠，还可以结合JavaScript实现实时修改，是现代CSS开发中不可或缺的重要工具。随着设计系统和组件化开发的流行，CSS变量已经成为构建大型Web应用的重要基础。