5 个 CSS 变量示例，让您轻松掌控样式管理

随着 Web 应用程序变得越来越大，CSS也变得越来越大、冗长且难以维护。为了应对这些挑战，CSS 变量应运而生。它提供了一种机制，可以重用和轻松更改重复出现的 CSS 属性，从而使代码更加简洁、易读和可维护。

本文将通过 5 个示例向您展示如何使用 CSS 变量来管理样式。这些示例涵盖了从简单的颜色更改到复杂的主题切换，将帮助您了解 CSS 变量的强大功能并将其应用到您的项目中。

示例 1：更改主题颜色

:root {
  --primary-color: #ff0000;
  --secondary-color: #00ff00;
}

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

h1 {
  color: var(--secondary-color);
}

在这个示例中，我们定义了两个 CSS 变量 --primary-color 和 --secondary-color，并将其用于 body 和 h1 元素的样式。这样，当我们想要更改主题颜色时，只需修改这两个变量的值即可，而无需修改整个 CSS 文件。

示例 2：更改字体系列

:root {
  --font-family: "Helvetica", "Arial", sans-serif;
}

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

在这个示例中，我们定义了一个 CSS 变量 --font-family，并将其用于 body 元素的样式。这样，当我们想要更改网站的字体系列时，只需修改 --font-family 变量的值即可。

示例 3：创建响应式布局

:root {
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
}

@media (max-width: var(--breakpoint-sm)) {
  /* 针对小屏幕的样式 */
}

@media (min-width: var(--breakpoint-sm)) and (max-width: var(--breakpoint-md)) {
  /* 针对中屏幕的样式 */
}

@media (min-width: var(--breakpoint-md)) and (max-width: var(--breakpoint-lg)) {
  /* 针对大屏幕的样式 */
}

@media (min-width: var(--breakpoint-lg)) {
  /* 针对超大屏幕的样式 */
}

在这个示例中，我们定义了几个 CSS 变量 --breakpoint-sm、--breakpoint-md 和 --breakpoint-lg，并使用它们来创建响应式布局。这样，当屏幕尺寸改变时，网站的布局会自动调整以适应不同的设备。

示例 4：切换主题

:root {
  --theme: light;
}

body {
  background-color: var(--theme) === "light" ? #ffffff : #000000;
}

h1 {
  color: var(--theme) === "light" ? #000000 : #ffffff;
}

在这个示例中，我们定义了一个 CSS 变量 --theme，并将其用于 body 和 h1 元素的样式。这样，当我们想要切换网站的主题时，只需修改 --theme 变量的值即可。

示例 5：代码重构

:root {
  --padding: 10px;
  --border-radius: 5px;
}

.box {
  padding: var(--padding);
  border-radius: var(--border-radius);
}

在这个示例中，我们定义了两个 CSS 变量 --padding 和 --border-radius，并将其用于 .box 类元素的样式。这样，当我们需要更改 .box 元素的填充和边框半径时，只需修改这两个变量的值即可。

结论

通过以上 5 个示例，您已经了解了如何使用 CSS 变量来提高样式管理效率。CSS 变量可以帮助您轻松地重用和更改重复出现的 CSS 属性，从而使代码更加简洁、易读和可维护。如果您还没有开始使用 CSS 变量，那么现在是时候尝试一下了。