大多数编程语言都支持变量。但令人遗憾的是，css从一开始就缺乏对本地变量的支持。
你写css？那么没有变数给你。那么，除非你使用像sass这样的预处理器。
像sass这样的预处理器将变量的使用作为一个大附加组件来销售。一个尝试他们的理由。你知道吗？这是一个很好的理由。
那么网络正在快速发展。我很高兴地报告css现在最终支持变量。
虽然预处理器支持更多的功能，但添加css变量是一个不错的选择。这些使网络更加贴近未来。
在本指南中，我将向您展示变量如何在css中以原生方式工作，以及如何使用它们使您的生活更轻松。
你会学到什么我将首先引导您了解css变量的基础知识。我相信任何理解css变量的体面尝试都必须从这里开始。
学习基础很酷。更酷的是应用这些基础来构建真实世界的应用程序。
因此，我将通过向您展示如何构建3个展示css变量及其易用性的项目来包装。以下是这3个项目的快速预览。
项目1：使用css变量创建组件变体您今天可能已经在构建组件变体。无论您使用react，angular还是vue，css变量都会使此过程更简单。
使用css变量创建组件变体查看codepen上的项目。
项目2：css变量的主题样式你可能会在某处看到这个。我将展示css变量如何轻松创建站点范围的主题样式。
使用css变量的站点范围主题样式查看codepen上的项目。
项目3：建立css可变展位这是最后的项目。不介意这个名字。我无法想出一个更好的名字。
箱子的颜色是动态更新的请注意盒子的颜色是如何动态更新的，以及盒子容器如何在3d空间中旋转，因为范围输入已更改。
该项目展示了使用javascript更新css变量的便捷性以及您获得的反应性好东西。
这将会非常好玩！花一些时间在codepen上玩一下吧。
注意：本文假定您对css有很好的把握。如果你不熟悉css，或者想学习制作令人惊叹的ui，我建议参加我的高级css课程（付费课程包括85课程）。本文是该课程的摘录。</无耻插件>
为什么变量如此重要如果您对预处理器或原生css中的变量不熟悉，请参阅变量非常重要的几个原因。
原因＃1：更多可读代码不用多说，你可以很快地知道可读性和可维护性变量如何构成任何代码库。
理由2：跨大型文档的易用性如果您将所有常量保存在单独的文件中，则当您想对变量进行更改时，不必跳过数千行代码。
它变得非常容易。只要在一个地方改变它，瞧。
原因3：你可以更快地发现错别字搜索试图发现错误的代码行是一种痛苦。如果错误是由于简单的错字造成的，那更令人讨厌。他们很难发现。变量的良好使用消除了这些麻烦。
为此，可读性和可维护性是巨大的胜利。
感谢css变量，现在我们也可以使用原生css。
定义css变量让我从你可能已经熟悉的东西开始：javascript中的变量。
一个简单的javascript变量可以这样声明：
var amawesome;然后你可以像这样给它赋值：
amawesome = awesome string在css中，css变量是名称以两个破折号开头的任何“属性”。
/*can you spot the variable here? */
.block {
color: #8cacea;
--color: blue
}
css变量也被称为“自定义属性”范围css变量还有一点需要注意。
请记住，在javascript中，变量有一个范围。他们可能有一个global或一个local范围。
css变量也是如此。
考虑下面的例子：
:root {
--main-color: red
}该:root选择可以让您针对dom中最高级的元素，或文档树。
因此，以这种方式声明的变量是全球范围的范围。
了解？
本地和全局范围的变量例1假设你想创建一个css变量来存储主题站点的主要颜色。
你会怎么做呢？
您创建范围选择器。使用:root一个“全局”变量:root {
}2.定义变量
:root {
--primary-color: red
}请记住，css变量是任何名称以两个破折号开头的“属性”，例如?--color
那很简单。
使用css变量一旦变量被定义并赋值，您可以继续在属性值内使用它。
尽管如此，还是有点困难。
如果您来自预处理器的世界，您必须习惯于通过引用其名称来使用变量。例如：
$font-size: 20px
.test {
font-size: $font-size
}有了原生的css变量，事情有点不同。您通过使用该var()函数引用一个变量。
使用上面的例子，使用css变量会产生这样的结果：
:root {
--font-size: 20px
}
.test {
font-size: var(--font-size)
}很不一样。
请记住使用var函数一旦你明白了，你会开始喜欢css变量 – 很多！
另一个重要的注意事项是，与sass（或其他预处理器）中的变量不同 – 您可以在很多地方使用变量，并按照您的要求进行数学运算 – 您需要注意css变量。你将主要将它们设置为属性值。
/*this is wrong*/
.margin {
--side: margin-top;
var(--side): 20px;
}
该声明作为具有无效属性名称的语法错误而被丢弃你也无法做数学。你需要css?calc()功能。我们将继续讨论示例。
/*this is wrong */
.margin {
--space: 20px * 2;
font-size: var(--space); //not 40px
}如果你必须做数学，然后使用calc（）函数，如下所示：
.margin {
--space: calc(20px * 2);
font-size: var(--space); /*equals 40px*/
}值得一提的属性这里有一些值得一提的行为。
1.自定义属性是普通属性，所以它们可以在任何元素上声明。在段落元素，节，旁边，根或伪元素上声明它们。他们会按预期工作。
他们表现得像普通的属性2.使用正常的继承和级联规则解决css变量考虑下面的代码块：
div {
--color: red;
}
div.test {
color: var(--color)
}
div.ew {
color: var(--color)
}与正常变量一样，该--color值将由div继承。
3. css变量可以使用@media条件规则和其他条件规则与其他属性一样，您可以更改@media块或其他条件规则中的css变量的值。
例如，以下代码更改较大设备上变量的值。
:root {
--gutter: 10px
}
@media screen and (min-width: 768px) {
--gutter: 30px
}
快速设计的有用位4. css的变量可以用在html的style属性中。您可以选择内联设置变量的值，并且它们仍然按预期工作。
<!--html-->
<html style=--color: red>
<!--css-->
body {
color: var(--color)
}
内联设置变量css变量区分大小写。小心这个。我为自己节省了压力，并以小写形式写入变量。你的里程可能不同。
/*these are two different variables*/
:root {
--color: blue;
--color: red;
}解决多个声明与其他属性一样，使用标准级联解决多个声明。
我们来看一个例子：
/*define the variables*/
:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
/*use the variable */
* { color: var(--color); }通过上面的变量声明，以下元素的颜色是什么？
<p>what's my color?</p>
<div>and me?</div>
<div id='alert'>
what's my color too?
<p>color?</p>
</div>你能解释一下吗？
第一段将是blue。没有--color在p选择器上设置直接定义，所以它继承了来自的值?:root
:root { --color: blue; }第一个div将是green?。这很清楚。有一个直接的变量定义设置div
div { --color: green; }该div用的id?alert将不会是绿色的。这将是red
#alert { --color: red; }该id具有直接变量范围。因此，定义内的值将覆盖其他值。选择器#alert更具体。
最后，p在#alert意志内…red