CSS 变量是由CSS作者定义的实体，其中包含要在整个文档中重复使用的特定值。使用自定义属性来设置变量名，并使用特定的
在构建大型站点时，作者通常会面对可性的挑战。在这些网页中， 所使用的 CSS 的数量常庞大的，并且在许多场合大量的信息会重复使用。
例如，在网页中一个配色方案，意味着一些颜色在CSS文件中多次出现，并被重复使用。当你修改配色方案时，不论是调整某个颜色或完全修改整个配色，都会成为一个复杂的问题，不容出错，而单纯查找替换是远远不够的。
如果使用了 CSS 框架，这种情况会变得尤其糟糕，此时如果要修改颜色，则需要对框架本身进行修改。在这些场合使用 LESS 或 Sass 类似的预处理器常有帮助的，但是这种通过添加额外步骤的方式，可能会增加系统的复杂性。
这些变量的第二个优势就是名称本身就包含了语义的信息。CSS 文件变得易读和理解。main-text-color比文档中的#00ff00更容易理解，特别是同样的颜色出现在不同的文件中的时候。
在一些命令式编程语言中，像Java、C++亦或是Java，通过变量我们能够某些状态。变量是一种符号，关联着一个特定的值，变量的值能随着时间的推移而改变。
CSS 引入了一种层级变量的概念，从而能够从容应对可性的挑战。这就会使得在整个 CSS tree 中都可以象征性的引用一个变量。
变量，就是拥有标识符和的值。可以被使用在任意的地方。可以使用var函数使用变量。例如：var(--example-variable)会返回--example-variable所对应的值
注意：在之前的标准中，自定义属性以var-作为前缀，后来才改成--前缀。Firefox 31和以后的版本遵循新标准。(bug 985838)
注意CSS中重复的地方，马伊琾brown的背景色作用在不同的元素。我们可以将背景色定义在更高的层级，然后通过CSS继承解决这个问题。在某些情况下，这种方法不一定可行。定义一个变量在:root伪类上，使用变量来减少重复的代码。
在传统的CSS概念里，属性的有效性(validity)对于自定义属性来讲，并不适用。当自定义属性被解析，浏览器不知道哪里为调用到它们，所以几乎所有的值都是有效的。
不幸的是，这些有效值能通过var函数操作符来调用，即使在当前上文没有意义。属性和自定义的值会导致无效的CSS声明，所以有了计算时有效(valid at computed time)的概念。返回搜狐，查看更多