CSS 变量入门指南

CSS 变量是一种强大的工具，它允许你定义一组可以重用的值，然后在整个样式表中重复使用这些值。这使得维护和更新样式变得更加容易。

基本用法

要在 CSS 中使用变量，首先需要在 :root 伪类中定义它们：

:root {
  --main-color: #3498db;
  --font-size: 16px;
}

然后，你可以在任何选择器中使用这些变量：

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

变量的命名

变量名应该使用两个短横线（--）开头，后面跟一个有效的 CSS 标识符。

示例

假设你正在创建一个响应式网站，并希望在不同屏幕尺寸下改变字体大小和背景颜色。你可以这样定义：

:root {
  --main-color: #3498db;
  --font-size: 16px;
}

@media (min-width: 768px) {
  :root {
    --font-size: 18px;
  }
}

@media (min-width: 992px) {
  :root {
    --main-color: #2ecc71;
  }
}

这样，当屏幕宽度达到 768px 时，字体大小会变成 18px，而当屏幕宽度达到 992px 时，背景颜色会变成绿色。

扩展阅读

想了解更多关于 CSS 变量的信息？请阅读我们的CSS 变量高级教程。

[center]