CSS 变量：一个变量救你一百次复制粘贴

CSS 变量：一个变量救你一百次复制粘贴

---

先说结论

CSS 变量就是给颜色、尺寸这些值起个"名字"，以后改一处，全部自动更新。

以前你可能写了 50 次 #3b82f6，现在只需要写一次 --brand-color: #3b82f6，然后到处用 var(--brand-color)。

---

为什么需要它？看个真实场景

没有变量时，你的代码长这样：

css
.btn-primary { background: #3b82f6; }
.btn-primary:hover { background: #2563eb; }
.card-title { color: #3b82f6; }
.link { color: #3b82f6; }
.badge { background: #3b82f6; }

老板说： "蓝色换成紫色。"

你要改 5 处。

有了变量：

css
:root {
  --brand-color: #3b82f6;
}

.btn-primary { background: var(--brand-color); }
.btn-primary:hover { background: #2563eb; }
.card-title { color: var(--brand-color); }
.link { color: var(--brand-color); }
.badge { background: var(--brand-color); }

老板说换紫色？改一行，全部搞定。

---

怎么用？三步搞定

第一步：定义变量（一般写在 :root 里）

css
:root {
  --primary-color: #3b82f6;
  --text-color: #1f2937;
  --spacing-md: 16px;
  --radius: 8px;
}

:root 相当于全局作用域，哪里都能用。

第二步：使用变量

css
.button {
  background: var(--primary-color);
  color: var(--text-color);
  padding: var(--spacing-md);
  border-radius: var(--radius);
}

第三步：支持默认值（可选）

万一变量没定义，给个保底值：

css
.button {
  background: var(--primary-color, #999); /* 如果 --primary-color 不存在，用 #999 */
}

---

变量不只能存颜色

类型	示例	用途
颜色	--brand: #3b82f6	品牌色、文字色
尺寸	--space: 16px	间距统一管理
圆角	--radius: 8px	全站圆角一致
字体	--font: "Inter", sans-serif	字体族
甚至可以存数字	--scale: 1.2	缩放比例

css
:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --radius: 8px;
  --font-base: "Inter", sans-serif;
  --transition: 0.2s ease;
}

然后你的组件全用这些变量，风格高度统一。

---

变量可以被覆盖（这才是杀手级功能）

变量有作用域，子元素可以覆盖父元素的变量：

css
:root {
  --text-color: #1f2937;
}

.dark-theme {
  --text-color: #f9fafb; /* 只在 .dark-theme 内部生效 */
}

.dark-theme p {
  color: var(--text-color); /* 用的是 #f9fafb */
}

body p {
  color: var(--text-color); /* 用的是 #1f2937 */
}

一键换主题，就靠这一招。

---

实战：暗色模式切换

css
:root {
  --bg: #ffffff;
  --text: #1f2937;
  --card-bg: #f3f4f6;
}

/* 暗色模式只需要覆盖这几个变量 */
.dark {
  --bg: #111827;
  --text: #f9fafb;
  --card-bg: #1f2937;
}

/* 组件完全不用改，自动适配 */
.card {
  background: var(--card-bg);
  color: var(--text);
}

JavaScript 只需要切换 <body> 的 class：

js
document.body.classList.toggle('dark');

不用写任何 if/else 样式，变量自动生效。

---

常见问题速查

问题	答案
变量名必须用 -- 开头？	✅ 是的，这是 CSS 变量的语法规定
变量名区分大小写？	✅ --color 和 --Color 是两个变量
能在媒体查询里用吗？	✅ 完全可以
浏览器支持？	所有现代浏览器都支持，IE 不支持（2026 年了，不用管 IE）
能用在 calc() 里吗？	✅ width: calc(var(--width) * 2)

---

最佳实践：建一套自己的变量命名体系

别乱起名，按功能分组：

css
:root {
  /* 🎨 颜色 */
  --color-primary: #3b82f6;
  --color-text: #1f2937;
  --color-bg: #ffffff;

  /* 📐 间距 */
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-8: 32px;

  /* 🔤 排版 */
  --font-sans: "Inter", sans-serif;
  --font-size-base: 16px;

  /* ⚡ 动画 */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
}

命名带前缀，一眼就知道是颜色、间距还是动画。

---

一句话总结

CSS 变量 = 给值起名字。定义一次，到处使用，一改全改。加上暗色模式覆盖，你的样式系统就活了。

现在去把你项目里重复出现的颜色和尺寸，全换成变量吧。改一次你就回不去了。