CSS变量怎么使用？

在构建可维护和灵活的前沿Web界面时，CSS自定义属性，通常被称为CSS变量，是一项改变游戏规则的技术。它允许你在样式表中定义可复用的值，并在整个文档中引用它们，这大大提升了主题切换和批量修改样式的效率。

理解CSS变量的基础语法

CSS变量以两个连字符开头（--），后面跟随自定义的名称。它们的作用域取决于其被定义的选区。在:root伪类中定义的变量具有全局作用域，可供整个文档使用。要使用一个变量，你需要通过var()函数来引用它。

定义一个变量并使用它：

:root {
  --primary-color: #3498db;
  --spacing-unit: 16px;
}

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

.card {
  border: 2px solid var(--primary-color);
  margin-bottom: var(--spacing-unit);
}

在这个例子中，修改:root中的--primary-color值，所有使用该变量的元素颜色都会同步更新，这为整个网站的主题调整提供了极大的便利。

CSS变量的作用域与继承

变量遵循CSS的层叠和继承规则。你可以在任何选择器内部定义变量，使其作用域仅限于该选择器及其子元素。这允许你在组件级别创建专属的变量。

.card {
  --card-bg: #f1f1f1;
  background: var(--card-bg);
}

.dark-card {
  --card-bg: #333;
}

这里，--card-bg的作用域局限于.card及其变体。.dark-card会覆盖变量的值，从而实现组件内部的样式定制。

结合JavaScript实现动态样式

CSS变量的真正威力在于可以被JavaScript实时读取和修改，这使得动态主题切换或响应用户交互变得非常简单。

document.documentElement.style.setProperty('--primary-color', '#e74c3c');

这行代码将全局的--primary-color变量值修改为新的红色，所有依赖此变量的元素样式会立即更新。这种方式避免了直接操作大量DOM元素样式，性能更优。

在项目中使用CSS变量时，建议建立一个包含颜色、字体大小、间距等设计令牌的核心变量文件。注意旧版本浏览器的兼容性，对于关键样式可以考虑使用@supports规则提供回退方案。合理地使用变量能让你的样式表更加清晰和强大。