👨🏾‍🍳 🛬 😍 CSS变量快速入门指南（用例，语法和示例） 👐🏼 😯 ✳️

我已经尝试CSS变量已有一段时间了。如果您尚未联系他们，则可以使用此简短指南快速找到解决方法并开始工作。

这是什么

一个带有范围的按钮的简单应用示例

CSS变量允许您在CSS中定义可重用的值。

他们出现很久了。最近，由于更广泛的浏览器支持，它们开始流行。

如果使用预处理器（例如SASS），则您已经熟悉变量。现在，您无需预处理器即可执行相同的操作。

为什么要使用样式变量？

变量使我们能够遵循DRY的原理（请勿重复）。多亏了他们，我们也有了一种为重复值创建单个参考点的方法。如果使用预处理器，则很可能已经熟悉了这种方法的优点。通常，它用于设置用于许多元素的基础颜色。

重复多个选择器的背景色

在上面的代码段中， #e74c3c的值可以并且应该是变量。如果我们根据该值创建变量，则会得到一个可以引用的点。这样可以减少错误和样式问题的风险，因为这有助于进一步的维护。

使用变量创建参考点

在第二个片段中，我使用预处理程序来说明如何将变量用作background-color值。

为什么不使用预处理器变量而不是本机CSS变量？

好问题。在大多数情况下，您倾向于保留对预处理程序变量的承诺。如果您已经在使用它们，则是如此。但是您可以同时利用这两种方法。当有必要充分利用本机CSS变量的功能时，这变得很重要。稍后再详细介绍。

在以下情况下应使用本机CSS变量：

您没有预处理器或不使用它。
您想利用本机CSS变量。

本机CSS变量的主要优点

我认为，原生CSS变量有两个很大的优点。

第一个。它们在运行时更新！可以使用媒体查询，状态甚至JavaScript来控制它们。浏览器将应用所做的更改。这开辟了许多可能性。

另外，CSS变量允许范围。这意味着，例如，您可以通过更新变量的值来更改元素的样式或行为。否则，您必须从头开始为此元素注册新样式。结果，输出处CSS的体积减小了。

不是最漂亮的语法

让我们来看一个例子。

什么是伪:root ？一切都是合乎逻辑的：它是树根的伪选择器。 :root选择器可用于定义全局变量。在这种情况下，我们为--primary变量定义了rebeccapurple值。

要定义变量，使用两个连字符作为前缀。

要使用变量，我们需要var函数。

当我们引用一个未设置值的变量时会发生什么？在这种情况下，您可以设置后备值或默认值。 var函数支持第二个可选参数，与后备值或默认值相对应。

此代码段设置button标记的源样式。如果有可能使用background-color ， --btn-color值。如果变量不存在或未设置值， --primary值。

无需为我们的后备使用变量。您可以取值。但是使用变量将更容易实现代码支持。

请注意，没有为button.btn声明任何样式。而是，值被更新。现在可以继续进行级联和合并范围了。

级联和范围

使用变量时，要考虑级联以及变量的范围。在前面的示例中，变量在:root伪:root中声明。 :root选择器中的所有变量都具有全局作用域。

在上面的一个示例中，-- --primary可用于所有选择器。由于范围，该值可以被覆盖。例如，我们希望--primary值更改premium类。

在此片段中， premium类元素的--primary变量的值为dodgerblue 。也就是说，如果没有类应用于button ，则变量的值是rebeccapurple 。但是，如果应用premium类，则颜色将更改为dodgerblue 。

值得注意的是，与内联样式一样，内联CSS变量具有最高优先级。