CSS中的变量给了我们诸多优点：方便、代码重用、更可靠的代码库和提升防错能力。
示例:root { –base-font-size: 16px; –link-color: #6495ed;}p { font-size: var( –base-font-size );}a { font-size: var( –base-font-size ); color: var( –link-color );}基础
当使用CSS变量时，你应该了解的三个主要组成：
自定义属性
你已经知道了一些CSS的标准属性，如color,margin,width和font-size。 下面的示例使用了CSS的color属性：
body { color: #000000; /* The “color” CSS property */}
自定义属性仅意味着我们（创建CSS文件的人）去定义属性的名字。 为了自定义一个属性名，我们需要用–作为前缀。 如果我们要创建一个值为黑色的、名为text-color的自定义属性，可以这样做：
:root { –text-color: #000000; /* A custom property named “text-color” */}var()函数
为了应用自定义属性，需要利用var()函数，否则浏览器不知道他们代表什么。 如果想要在p、h1和h2中的样式中使用–text-color，可以这样使用var()函数：
:root { –text-color: #000000;}p { color: var( –text-color ); font-size: 16px;}h1 { color: var( –text-color ); font-size: 42px;}h2 { color: var( –text-color ); font-size: 36px;}
其等价于：
p { color: #000000; font-size: 16px;}h1 { color: #000000; font-size: 42px;}h2 { color: #000000; font-size: 36px;}:root伪类
我们需要一个地方来放置自定义属性。虽然可以在任何样式规则中指定自定义属性，但到处定义属性并不是一个好主意，这对CSS的可维护性和可阅读性是一个挑战。 :root 伪类代表了HTML文档的根元素，这是一个放置自定义属性的好位置，因为我们可以通过其他更具特异性的选择器来覆盖自定义属性值。
CSS变量的好处可维护性
在一个Web开发项目中，我们经常重复使用一个特定的CSS属性值：
h1 { margin-bottom: 20px; font-size: 42px; line-height: 120%; color: gray;}p { margin-bottom: 20px; font-size: 18px; line-height: 120%; color: gray;}img { margin-bottom: 20px; border: 1px solid gray;}.callout { margin-bottom: 20px; border: 3px solid gray; border-radius: 5px;}
当需要改变某些属性值时，问题就会暴露出来了。 如果我们手动的改变属性值，尤其是当CSS文件很大时，不仅会花费大量时间，还可能会范一些错误。同样的，如果我们执行一个批处理查找和替换,就可能会无意中影响其他样式规则。 我们可以使用CSS变量重写：
:root { –base-bottom-margin: 20px; –base-line-height: 120%; –text-color:gray;}h1 { margin-bottom: var( –base-bottom-margin ); font-size: 42px; line-height: var( –base-line-height ); color: var( –text-color );}p { margin-bottom: var( –base-bottom-margin ); font-size: 18px; line-height: var( –base-line-height ); color: var( –text-color );}img { margin-bottom: var( –base-bottom-margin ); border: 1px solid gray;}.callout { margin-bottom: var( –base-bottom-margin ); border: 1px solid gray; border-radius: 5px; color: var( –text-color );}
假设你现在的客户说由于文本颜色太亮，导致文本难以阅读，想要改变文本颜色，此时，我们只需要更新一行CSS规则：
–text-color: black;提高CSS的可读性
自定义属性会使样式表更加易读，也会使CSS属性声明更有语义。 将这个声明
background-color: yellow;font-size: 18px;为了一些琐事吵架，然后冷战，疯狂思念对方，最后和好。
