CSS中的属性值支持变量，这对日常开发用处不大，但是编写样式组件库的时候，使用变量能够大幅优化代码的可维护性。
假设我们有一个palette.css，其中定义了一系列用于表示颜色的class，另外有一个button.css，定义了按钮的样式class，使用时，在<button>标签上组合颜色的class和按钮的class。
比如：<button class="fg-red bg-white mybutton"></button>，fg-修饰前景色，bg-修饰背景色。
为了实现上述功能，最好的办法是将palette.css中的颜色定义成变量，然后在button.css中引用。
颜色变量：
.fg-red {
--fg-color: red;
}
.bg-white {
--bg-color: white;
}
定义变量的格式为：--变量名。
按钮样式：
.mybutton {
color: var(--fg-color, black);
background-color: var(--bg-color, white);
}
引用变量的格式为：var(--变量名，默认值)。
那么为什么不在颜色定义中，直接定义color、background-color等CSS属性呢？主要有两个原因：
palette.css定义了background-color，但我们还需要它能够影响阴影的颜色，而且有的组件有阴影有的组件没有，不使用变量就很难办了。使用变量，我们只需要在需要阴影的组件上，定义background-color和box-shadow时都引用变量就能够很容易实现该效果。上面例子中，我们定义的变量是在一个class上的，使用时，也是需要HTML标签上面引用该class，那么如何定义全局变量呢？这可以通过:root伪类来实现。
例子：
:root {
--txt-color: red
}
#txt {
color: var(--txt-color)
}
这样，我们所有的class上就能直接引用到该变量了。