CSS 变量：提升 Web 样式灵活性与可维护性的利器

CSS 变量，正式名称为 CSS 自定义属性（CSS Custom Properties） ，是现代 Web 开发中的一项革命性特性。它使得开发者可以在 CSS 中像在其他编程语言中一样定义和复用变量值，极大地提升了样式的可维护性和灵活性。

一、核心概念

定义与使用方法

CSS 变量的核心思想是在一个地方定义一个值，并在整个样式表中多次引用该值。具体实现方式如下：

• 定义 : 使用 -- 前缀来声明变量，例如：--main-color: #3498db;
• 使用 : 通过 var() 函数引用已定义的变量，例如：color: var(--main-color);

与预处理器（如 Sass 或 Less）中的变量不同，CSS 变量是原生且在浏览器中直接运行。它们可以被 JavaScript 动态修改，实现真正的运行时交互。

二、使用方法

定义变量

CSS 变量的作用域遵循 CSS 的层叠规则，并可以通过以下两种方式定义：

• 全局作用域 : 在 :root 中定义。

  :root {
  --primary-color: #3498db;
  --base-font-size: 16px;
  --spacing-unit: 1rem;
  }

• 局部作用域 : 在任何 CSS 选择器内部定义，仅在该选择器及其子元素中生效。

  .card {
  --card-bg-color: #ffffff;
  --card-border-radius: 8px;
  background-color: var(--card-bg-color);
  border-radius: var(--card-border-radius);
  }

使用变量

通过 var() 函数引用已定义的变量：

.button {
  background-color: var(--primary-color);
  font-size: var(--base-font-size);
  padding: var(--spacing-unit);
}

提供回退值

var() 函数可以提供一个默认值，确保在未定义或无效的情况下使用该值。

.element {
  color: var(--custom-color, #333);
}

三、核心特性

• 继承性 : CSS 变量可以被继承，如果某个元素没有定义变量，则从其父级继承。
• 动态性 : JavaScript 可以实时读取和修改 CSS 变量的值，实现动态样式变化。
• 与 calc() 结合使用 : 变量可以与 calc() 函数无缝配合进行计算。

  .container {
  width: calc(100% - (var(--spacing-unit) * 2));
  }

四、主要应用场景

主题切换（深色/浅色模式）

通过定义不同主题下的变量值来实现一键换肤功能：

/* 默认主题 */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
}

/* 深色主题 */
.dark-theme {
  --bg-color: #1a1a1a;
  --text-color: #f0f0f0;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s ease;
}

构建统一的设计系统

通过定义和管理设计令牌，确保整个应用风格的一致性：

:root {
  --color-primary: #0066cc;
  --color-success: #52c41a;
  --color-error: #ff4d4f;

  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;

  --font-size-base: 16px;
  --font-size-lg: 20px;
}

响应式设计

通过媒体查询在不同屏幕尺寸下改变变量值，实现优雅的响应式布局：

:root {
  --container-padding: 15px;
  --font-size: 14px;
}

@media (min-width: 768px) {
  :root {
    --container-padding: 30px;
    --font-size: 16px;
  }
}

.container {
  padding: var(--container-padding);
  font-size: var(--font-size);
}

与 JavaScript 动态交互

通过 JavaScript 实时修改 CSS 变量的值，实现丰富的动态效果：

const root = document.documentElement;

root.style.setProperty('--primary-color', '#e74c3c');
console.log(getComputedStyle(root).getPropertyValue('--primary-color'));

五、最佳实践

命名规范

使用清晰且语义化的命名，推荐 kebab-case（短横线分隔）格式：

--primary-color
--base-font-size

作用域管理

合理利用全局和局部变量。将通用设计令牌放在 :root 中，组件特有的变量应置于相应的选择器中。

避免过度使用

仅对需要复用或可能动态变化的值定义为 CSS 变量。

通过以上最佳实践，可以更好地管理和优化 CSS 变量的应用，提升项目的可维护性和灵活性。