数字[0-9]、字母[a-zA-Z]、下划线_和短横线-这些组合，甚至是中文也行，但不能包含$、[、^、(、%等字符选择器{
--变量名: 变量值;
}
选择器{
css属性: var(--变量名 [, 默认值]);
}
<body>
<div class="test">
<div class="test_desc test_desc--nodata">这是一个测试div</div>
</div>
<div class="test">
<div class="test_desc test_desc--nodata"></div>
</div>
</body>
:root{
/* 在根元素定义变量 */
--length: 200px;
--bgcolor: red;
--font-change: underline;
}
.test{
/* 使用变量 */
/* 还可以传入一个默认值，即当该变量没被定义过时，会取该默认值 */
background-color: var(--bgcolor, grey);
/* calc()函数对变量计算 */
width: calc(2 * var(--length));
height: var(--length);
margin: calc(var(--length) - 180px);
border: calc(var(--length) / 20) solid black;
/* 父元素定义变量 */
--font-change: line-through;
}
.test_desc{
/* 子元素使用变量，注意覆盖 */
text-decoration: var(--font-change);
margin: calc(var(--length) / 2);
}
原文：https://www.cnblogs.com/fork-ice/p/14724631.html