没有任何类型的预处理器的纯CSS中的变量现在可以在大多数现代浏览器中使用。它们的官方名称是Customer properties]，可以避免传统的css所涉及的很多重复工作，而且，与预处理器的变量相反，它们可以动态更改。
下面介绍如何使用自定义属性：
1/* Declaration */
2some-element {
3 --my-bg-color: #F9EC31;
4}
5
6/* Using it */
7some-element {
8 background-color: var(--my-bg-color);
9}
您还可以在使用变量时提供回退值，如果变量尚未定义，则将使用该值：
1some-element {
2 background-color: var(--my-bg-color, papayawhip);
3}
：根
一个常见的用例是在：root伪类中定义变量，然后在需要值的任何地方使用它：
1:root {
2 --funky-shadow: 3px 3px 10px brown;
3}
4
5.ugly-box {
6 box-shadow: var(--funky-shadow);
7}
calc()
您还可以对变量值使用calc()：
1:root {
2 --special-padding: 1.5em;
3}
4
5.pandora-box {
6 padding-bottom: calc(var(--special-padding) + 1em);
7}
浏览器支持
Css神话是现在开始使用👉变量的一个很好的选择。
我是否可以从caniuse.com使用css-variables？数据来支持主流浏览器的css变量功能。
Span.hljs-number{COLOR：首字母；}