什么是 CSS 自定义属性（变量）？

Question

什么是 CSS 自定义属性（变量）？

Accepted Answer

**CSS 自定义属性**（变量）允许你存储一次值并重复使用。与预处理器 (Sass) 变量不同，它们在**运行时是活动的**——它们级联、继承，并且可以通过 JavaScript 或媒体查询进行更改。

```css
:root {                 /* :root = the html element → global scope */
  --color-primary: #3b82f6;
  --spacing: 1rem;
  --radius: 8px;
}

.button {
  background: var(--color-primary);   /* use with var() */
  padding: var(--spacing);
  border-radius: var(--radius);
}
```

## 回退值

```css
color: var(--text-color, black); /* use black if --text-color isn't defined */
```

## 它们级联且可以作用域/覆盖

```css
.card { --padding: 1rem; }
.card.compact { --padding: 0.5rem; } /* override locally — children using var() update */
```

因为它们会继承，在父元素上设置的变量对所有后代都可用，并且可以在子树上覆盖——这是已编译的 Sass 变量无法做到的。

## 杀手级功能：运行时主题切换

```css
:root { --bg: white; --text: black; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #111; --text: #eee; } /* redefine the SAME vars for dark mode */
}
body { background: var(--bg); color: var(--text); }
```

通过重新定义少量变量来切换整个主题——没有重复的规则。你也可以用 JS 来做：

```js
document.documentElement.style.setProperty("--color-primary", "#e11d48");
```

这会立即更新使用该变量的每个元素——这对于已编译的 Sass 变量是不可能的。

## 为什么这很重要

CSS 变量是现代**主题设计和设计令牌**的基础：一次定义颜色/间距，随处重复使用，并通过媒体查询或 JavaScript 在运行时切换主题（深色模式、品牌变体）。

它们为纯 CSS 带来了 DRY 和动态值——无需构建步骤。