5分钟内学习CSS变量
CSS自定义属性（也称为变量）对于前端开发人员来说是一个巨大的胜利。 它将变量的强大功能引入CSS，从而减少重复，代码更可读以及更灵活。
另外，与CSS预处理器的变量不同，CSS变量实际上是DOM的一部分，它是有很多好处。 所以他们基本上像SASS和LESS的变量。 在这篇文章中，我会给你一个关于这种新技术如何工作的速成课程。
我还创建了一个免费的关于CSS变量的课程，它由8节交互的课程构成。如果你想成为这个主题的专家，请打开：https://medium.freecodecamp.org/want-to-learn-css-variables-heres-my-free-8-part-course-f2ff452e5140。
为什么学习CSS变量？
在CSS中使用变量有很多原因。 其中最引人注目的就是它减少了样式表中的重复。
在上面的例子中，为#ffeead颜色创建一个变量要比重复它好得多，就像我们在这里所做的那样：
这不仅会使你的代码更易于阅读，而且还可以提供更大的灵活性，以防你想更改此颜色。
现在，SASS和LESS变量确实可以使用多年。 但是，CSS变量有一些很大的好处。
- 它们不需要任何转译工作，因为他们原生浏览器。 所以你不需要任何设置就可以开始，就像你使用SASS和LESS一样。
- 它们内置在DOM中，这为我带来了很多好处，我将在本文和即将到来的课程中介绍这些好处。
现在让我们开始学习CSS变量！
声明你的第一个CSS变量
要声明一个变量，首先需要确定变量应该在哪个范围内生效。如果希望全局可用，只需在:root伪类中定义它即可。 它匹配文档树中的根元素（通常是<html>标签）。
由于变量是继承的，因此所有DOM元素都是<html>标记的后代，这将使整个应用程序都可以使用变量。
:root {
--main-color: #ff6f69;
}
正如你所看到的，你可以像设置任何CSS属性一样声明一个变量。 但是，该变量必须以两个破折号开头。
要访问变量，需要使用var()函数，并将变量的名称作为参数传入。
#title {
color: var(--main-color);
}
这会给你的标题＃f6f69颜色：
声明局部变量
你也可以创建局部变量，这些局部变量只能对其声明的元素及其子元素访问。 如果知道某个变量仅用于应用程序的特定部分（或多个部分），则这是有意义的。
例如，你可能有一个警告框，它使用了一种特殊的颜色，这些颜色不会在应用中的其他地方使用。 在这种情况下，避免将其置于全局范围内是有道理的：
.alert {
--alert-color: #ff6f69;
}
这个变量现在可以被其子元素使用：
.alert p {
color: var(--alert-color);
border: 1px solid var(--alert-color);
}
如果尝试在你的应用程序的其他地方使用alert-color变量，例如在导航栏中，它根本行不通。 浏览器会忽略那一行CSS。
使用变量更容易响应
CSS变量的一大优点是他们可以访问DOM。 对于LESS或SASS，情况并非如此，因为它们的变量被编译为常规CSS。
实际上，这意味着你可以根据屏幕宽度更改变量：
:root {
--main-font-size: 16px;
}
media all and (max-width: 600px) {
:root {
--main-font-size: 12px;
}
}
通过这些简单的四行代码，你可以在小屏幕上查看整个应用程序的主字体大小。 很优雅，是吧？
如何使用JavaScript访问变量
内置在DOM中的另一个优点是，你可以使用JavaScript访问变量，甚至可以更新它们，例如基于使用的交互。 如果你想让用户能够更改网站（如调整字体大小），这非常完美。
让我们继续本文开头的例子。 在JavaScript中抓取CSS变量需要三行代码。
var root = document.querySelector(':root');
var rootStyles = getComputedStyle(root);
var mainColor = rootStyles.getPropertyValue('--main-color');
console.log(mainColor);
--> '#ffeead'
要更新CSS变量，只需在已声明变量的元素上调用setProperty方法，并将变量名称作为第一个参数，并将新值作为第二个参数传入。
root.style.setProperty('--main-color', '#88d8b0')
这种主色可以改变你的应用程序的整个外观，它是允许用户设置网站的主题。
浏览器支持
目前，77％的全球网站流量支持CSS变量，美国接近90％。 我们已经在Scrimba.com上使用CSS Variables一段时间了，因为我们的观众非常熟悉技术，并且大多使用现代浏览器。
好吧，就是这样。 我希望你学到了一些东西！
如果你想正确地学习它，请务必在Scrimba查看我的免费CSS变量课程。
