CSS 变量指南

CSS 变量是一种强大的工具，它允许开发者定义一组可重用的值，并在整个样式表中轻松引用这些值。这使得维护和更新样式变得更加简单和高效。

基本用法

CSS 变量的基本语法如下：

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

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

在上面的例子中，我们定义了两个变量：--main-color 和 --font-size。然后在 body 选择器中，我们通过 var() 函数引用了这些变量。

作用域

CSS 变量在定义它们的上下文中是可用的。这意味着，如果你在一个类中定义了一个变量，那么只有该类及其子类可以访问这个变量。

.container {
  --container-padding: 10px;
}

.container .inner {
  padding: var(--container-padding);
}

在上面的例子中，.container .inner 可以访问 --container-padding 变量，但是 .container 本身不能访问 .inner 中定义的变量。

限制

尽管 CSS 变量非常强大，但也有一些限制：

  • 变量名称必须以 -- 开头。
  • 变量值必须是有效的 CSS 值。
  • 变量不能在 @media、@keyframes 或 @supports 规则中使用。

扩展阅读

想要了解更多关于 CSS 变量的信息，可以阅读以下文章：

CSS 变量示例