CSS 变量

CSS 变量是 CSS3 中新增的特性，可以在 CSS 中定义一个变量，并且可以在整个样式表中重复使用，极大的方便了样式的维护和更新。

定义变量

定义 CSS 变量需要使用 -- 前缀，例如：

:root {
  --main-color: #ff0000;
}

上面的示例中，我们使用了 :root 伪类来定义全局变量 --main-color，并将它的值设置为红色。

使用变量

使用 CSS 变量需要将变量名用 var() 函数包裹起来，例如：

div {
  color: var(--main-color);
}

上面的示例中，我们将 div 元素的颜色设置为 --main-color 定义的变量值，即红色。

动态更新变量

CSS 变量是一种动态且可覆盖的机制，所以我们可以通过 JavaScript 脚本来动态修改变量的值，例如：

document.documentElement.style.setProperty('--main-color', '#00ff00');

上面的示例中，我们通过 style.setProperty() 方法动态将 --main-color 变量的值修改为绿色。

使用计算表达式

CSS 变量不仅可以保存固定值，还可以保存计算结果，例如：

:root {
  --font-size: 16px;
}

p {
  font-size: calc(var(--font-size) * 1.5);
}

上面的示例中，我们定义了一个名为 --font-size 的变量，并将它的值设置为 16px。接着，我们使用 calc() 函数将 p 元素的字体大小设置为 --font-size 的值乘以 1.5，即 24px。

总结

CSS 变量是一种强大的样式机制，可以提高代码的可读性和可维护性，同时还可以保存计算结果，实现更加灵活的样式效果。