使用 CSS 变量赋予你的 CSS 超能力

什么是 CSS 变量？

CSS 变量或 CSS 自定义属性是在 CSS 项目中声明可重用值的一种方式。CSS 变量可以大大减少代码重复，并允许我们在整个样式表中引用更具语义意义的名称，例如“--accent-color”，而不是它们所代表的实际值“#b5838d”。

大多数现代浏览器都支持 CSS 变量。如果您需要了解某个浏览器是否支持 CSS 变量（无需 polyfill），最佳做法是参考Can I Use?或MDN Web 文档等网站上的浏览器兼容性规范。

当前 CSS 变量浏览器支持情况（来源：MDN Web Docs）

如何声明 CSS 变量

要使用 CSS 变量，您需要创建一个 CSS 自定义属性，它是一个以双连字符开头的字符串--。这些属性的作用域和可用性取决于其选择器。通常，建议将选择器设置为伪选择器，:root以便其能够应用于整个网站。如果您选择更具体的选择器，则访问变量值的范围也会相应变化。

下面是一个示例，展示了在样式表中声明 5 个不同的 CSS 变量来表示不同的颜色。

:root {
  --white: #fff;
  --accent-color: #b5838d;
  --dark-accent-color: #a6757f;
  --main-color: #6d6875;
  --dark-main-color: #56505f;
}

为了在整个 CSS 中访问这些 CSS 值，我们可以使用var()类似 的方法var(--accent-color)。以下示例选择具有 类的元素signup并将其背景颜色更改为#b5838d。

.signup {
  background-color: var(--accent-color);
}

由于 的值--accent-color是通过 CSS 变量设置的，如果我们之后决定更改 的值，var(--accent-color)只需在声明变量值的地方进行更改即可。变量值更新后，其新值将自动反映在所有var(--accent-color)引用的位置。能够在一个地方更改多个仅由颜色关联的无关元素的颜色，这非常强大。

CSS变量的力量

CSS 变量让您可以快速调整配色方案，并在所有引用该方案的地方调整相同的颜色，而无需进行查找和替换。此外，设置 CSS 变量可以提升开发人员创建配色方案时的体验，因为您可以在不同主题之间切换变量声明值，而无需在样式表的其余部分中显式更改这些值。

--accent-color: orange;下面两张截图展示了 CSS 文件中一行代码从 更改为时的外观差异，这两个代码--accent-color: #b5838d;分别用于两个完全不同的位置——卡片的 border-top 属性和注册按钮的背景颜色。随着样式表的增长和值的重复使用，这种做法非常有用。

--accent-color: orange;	--accent-color: #b5838d;

探索 CSS 变量！

通过编辑下面的 Codepen来尝试使用 CSS 变量值，以查看 CSS 变量的实际效果！

本文最初发表于www.aboutmonica.com。如果您喜欢这篇文章，并想阅读其他类似的文章，请访问该网站。