CSS 变量（Variables）

CSS 变量是一种可用于存储和复用值的 CSS 值。与其他编程语言中的变量类似，CSS 变量的主要目的是为了简化代码和提高可维护性。

基本语法

要定义一个 CSS 变量，需要使用两个连字符 -- 来标识其名称，同时使用 CSS 声明块来给该变量赋值。例如：

:root {
  --primary-color: #007bff;
}

在上述示例中，我们定义了一个名为 --primary-color 的变量，并将其值设置为 #007bff。为了确保在整个文档中都能使用该变量，我们将其定义在 :root 选择器下，这是一个伪类选择器，意思是指根元素。

要使用这个变量，我们可以在任何需要使用该颜色的地方引用它。例如：

button {
  color: var(--primary-color);
}

在上述示例中，我们将 button 元素的文字颜色设置为 --primary-color 变量的值。这意味着，如果我们将 --primary-color 变量的值改为其他颜色，所有引用该变量的样式都会自动更新为新的值。

变量的应用

CSS 变量的应用非常广泛，下面是其中的一些示例：

更改主题颜色

使用 CSS 变量可以轻松地更改整个站点的主题颜色。只需要在根元素中定义一个颜色变量，然后引用该变量来设置文本颜色、背景颜色等。

:root {
  --primary-color: #007bff;
}

body {
  background-color: var(--primary-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--primary-color);
}

控制布局

使用 CSS 变量可以轻松地控制网站的布局。例如，我们可以定义一个变量来控制全局默认的页面边距：

:root {
  --default-margin: 1rem;
}

body {
  margin: var(--default-margin);
}

此外，我们还可以使用变量来控制不同元素之间的间距、字体大小等等。

响应式设计

使用 CSS 变量还可以轻松地应对不同屏幕宽度下的样式变化。例如，我们可以定义一个变量来控制移动设备上的字体大小：

@media (max-width: 768px) {
  :root {
    --font-size: 16px;
  }
}

body {
  font-size: var(--font-size);
}

在上述示例中，我们使用媒体查询来检测设备宽度是否小于 768 像素，并在这种情况下定义 --font-size 变量的值为 16px。然后，我们将 body 元素的字体大小设置为 --font-size 变量的值，这样就可以轻松地控制移动设备上的字体大小了。

总结

CSS 变量是一种非常有用的工具，可以帮助我们更好地组织代码、提高可维护性，并支持响应式设计。如果你还没有使用 CSS 变量，赶快试试吧！