CSS var() 函数（超详细）

CSS var() 函数：让你的样式表更智能

在前端开发中，我们常常会遇到这样的场景：一个颜色在多个地方重复使用，比如按钮的背景色、文本的主色调，或者某个基础字体大小。如果直接写死，一旦需要修改，就得在所有地方手动替换，非常容易出错，也难以维护。

这时候，CSS var() 函数就像一位“变量管家”，帮你把重复的值集中管理起来。它让 CSS 赋予了变量的能力，真正实现了“一处定义，处处使用”。这不仅提升了代码的可维护性，还让设计系统变得更灵活。

CSS var() 函数是现代 CSS 的核心特性之一，支持度良好，主流浏览器都已全面兼容。掌握它，是你从“写代码”迈向“写好代码”的重要一步。

什么是 CSS var() 函数？

CSS var() 函数的作用是引用一个自定义属性（也叫 CSS 变量）的值。自定义属性以 -- 开头，而 var() 函数则用来“取值”。

想象一下，你有一个房间，墙上挂着一幅画。这幅画的位置是固定的，但你可以通过一个“遥控器”来控制它的亮度。CSS 自定义属性就像这个遥控器的“调节旋钮”，而 var() 函数就是你按下按钮时读取当前设置值的机制。

:root {
  --primary-color: #3498db;  /* 定义一个名为 primary-color 的变量，值为蓝色 */
  --font-size-base: 16px;    /* 定义基础字体大小 */
}

.header {
  background-color: var(--primary-color);  /* 使用变量，背景变蓝 */
  font-size: var(--font-size-base);        /* 使用变量，字体大小为 16px */
}

关键点说明：

:root 是 CSS 中的根选择器，代表整个文档的最顶层元素，常用于定义全局变量。

--primary-color 是一个自定义属性，命名规范以双横线 -- 开头。

var(--primary-color) 就是调用这个变量的值，如果找不到，可以设置默认值（后面会讲）。

如何定义和使用 CSS 变量？

定义变量的核心是使用 :root 或其他选择器来声明自定义属性。变量的作用域取决于声明的位置。

全局变量：在 :root 中定义

:root {
  --brand-blue: #2980b9;
  --text-color: #333333;
  --border-radius: 8px;
  --spacing-unit: 1rem;
}

这些变量在整个页面中都可以访问。比如你在不同组件中使用它们，就不用重复写颜色代码。

局部变量：在特定选择器中定义

.card {
  --card-bg: #ffffff;
  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  --card-padding: 16px;

  background-color: var(--card-bg);
  border-radius: var(--border-radius);
  padding: var(--card-padding);
  box-shadow: var(--card-shadow);
}

这个变量只在 .card 元素及其子元素中有效。如果某个子元素也定义了 --card-bg，它会覆盖父级的值。

小贴士：变量的优先级遵循“就近原则”。如果某个元素内部定义了同名变量，它会覆盖上级定义的值。

默认值设置：var() 函数的容错机制

在使用 var() 函数时，我们常会担心变量未定义导致样式失效。其实，var() 支持设置默认值，避免“找不到变量”的问题。

语法格式：var(--变量名, 默认值)

.button {
  background-color: var(--btn-bg, #e74c3c);  /* 如果 --btn-bg 未定义，使用红色 */
  color: var(--text-color, #ffffff);         /* 如果 --text-color 未定义，使用白色 */
  border: 2px solid var(--border-color, #ccc);
}

举个例子：

如果页面中没有定义 --btn-bg，按钮背景会自动变成 #e74c3c。

这就像你去餐厅点菜，服务员问你“要辣吗？”你没回答，系统默认给你加一点辣。这就是“默认值”的作用。

这种机制大大增强了代码的健壮性，特别适合在设计系统中使用。

实际案例：构建响应式主题切换系统

CSS var() 函数最强大的应用场景之一，就是实现动态主题切换。

我们来实现一个简单的“暗黑/明亮”主题切换功能。

HTML 结构

<button id="theme-toggle">切换主题</button>
<div class="box">这是一个可变样式的盒子</div>

CSS 定义变量和基础样式

:root {
  /* 明亮主题变量 */
  --bg-color: #ffffff;
  --text-color: #333333;
  --border-color: #cccccc;
  --shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.dark-theme {
  /* 暗黑主题变量 */
  --bg-color: #1a1a1a;
  --text-color: #f0f0f0;
  --border-color: #444444;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.box {
  background-color: var(--bg-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 20px;
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
}

JavaScript 控制主题切换

const toggleBtn = document.getElementById('theme-toggle');
const body = document.body;

toggleBtn.addEventListener('click', () => {
  if (body.classList.contains('dark-theme')) {
    body.classList.remove('dark-theme');
    toggleBtn.textContent = '切换主题';
  } else {
    body.classList.add('dark-theme');
    toggleBtn.textContent = '切换回明亮主题';
  }
});

效果说明：

当用户点击按钮时，页面会添加或移除 dark-theme 类。

由于 CSS 变量是动态的，所有使用 var(--bg-color) 等的元素会立刻更新样式，无需刷新。

整个过程流畅，性能好，完全由 CSS 控制，JavaScript 只负责切换类名。

这正是现代前端开发中“CSS 变量 + JavaScript”协作的经典范式。

变量与计算：结合 calc() 实现动态计算

CSS var() 函数还能与 calc() 函数结合，实现动态布局。

比如，你想让一个元素的宽度是屏幕宽度的 80%，再减去 20px 的内边距，可以这样写：

.container {
  width: calc(80vw - 20px);
  margin: 0 auto;
}

/* 用变量提升可读性 */
:root {
  --content-width: 80vw;
  --padding-offset: 20px;
}

.container {
  width: calc(var(--content-width) - var(--padding-offset));
  margin: 0 auto;
}

优势：

变量让代码更清晰，--content-width 一眼就能看出含义。

修改时只需改一个变量，无需改多处 calc() 表达式。

这种组合在构建响应式布局时非常实用。

常见误区与最佳实践

在使用 CSS var() 函数时，有些常见问题需要注意：

1. 变量命名规范

使用连字符命名，如 --primary-color，避免用驼峰或下划线。
命名要有语义，如 --font-size-large 比 --fs1 更清晰。

2. 避免在伪类中定义变量

/* ❌ 不推荐 */
.button:hover {
  --bg-color: #ff6b6b;
}

/* ✅ 推荐做法 */
.button {
  --bg-color: #3498db;
}

.button:hover {
  --bg-color: #ff6b6b;  /* 可以覆盖，但建议在父级定义 */
}

3. 在复杂项目中，建议统一变量命名空间

比如使用 --ui- 前缀表示 UI 相关变量：

:root {
  --ui-primary: #3498db;
  --ui-secondary: #9b59b6;
  --ui-font-size: 16px;
  --ui-spacing: 1rem;
}

这样能避免变量命名冲突，也方便后期维护。

总结与进阶建议

CSS var() 函数是现代 CSS 的重要基石，它让样式具备了“变量”的能力，提升了代码的可维护性、可读性和灵活性。

通过本篇文章，你已经掌握了：

如何定义和使用变量；
如何设置默认值防止错误；
如何结合 JavaScript 实现主题切换；
如何与 calc() 配合实现动态布局；
常见的使用陷阱和最佳实践。

如果你正在构建一个复杂项目，建议尽早引入 CSS 变量体系，哪怕先从几个核心变量开始。它带来的长期收益远大于初期学习成本。

CSS var() 函数不只是一个语法糖，它代表着一种“声明式、可复用、可维护”的设计思想。掌握它，你离写出优雅的 CSS 又近了一步。