CSS 变量初学者指南

Source: Dev.to

Introduction

在编写 CSS 时，你经常会一次又一次地重复相同的颜色、字体大小或间距值。这种重复会让代码更难维护。CSS 变量（也称为 CSS 自定义属性）通过允许你在一个地方存储值并在整个样式表中重复使用，解决了这个问题。

本指南将一步步解释 CSS 变量，使用非常简单的示例，适合完全的初学者。

What Are CSS Variables?

CSS 变量是可复用的值，在 CSS 中定义。

--main-color: blue;

这里，--main-color 保存了值 blue。

Why Use CSS Variables?

CSS 变量让你的代码：

• 更易阅读
• 更快更新
• 更加一致
• 更适合大型项目

如果你在一个地方更改了值，它会在所有使用该变量的地方自动更新。

How to Define CSS Variables

Using the :root Selector

:root 选择器是定义全局变量最常见且推荐的方式。

:root {
  --primary-color: #3498db;
  --spacing-unit: 1rem;
}

浏览器会在使用该变量的地方用其存储的值进行替换。

Local (Scoped) CSS Variables

变量也可以在特定选择器内部定义，从而限制其作用域。

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

该变量仅在 .card 内部有效。

Using Fallback Values

你可以提供一个后备值，以防变量缺失。

color: var(--secondary-color, black);

如果未定义 --secondary-color，文本颜色将回退为 black。

Common Use Cases for CSS Variables

• 主题颜色（浅色 / 深色模式）
• 字体大小
• 间距值
• 可复用的布局尺寸
• 设计系统

Beginner Mistakes to Avoid

• 定义变量时忘记前导的 --。
• 使用变量时未使用 var() 函数。
• 定义了太多不必要的变量。
• 对全局值没有使用 :root。

Conclusion

CSS 变量是一项强大且对初学者友好的特性，帮助你编写更简洁、更智能、更易维护的 CSS。通过集中管理值，你可以减少重复，并让未来的更新变得轻而易举。