定义变量
- 在{}声明块中定义
- 变量名：-- 双横杠开头，后面可以是
数字[0-9]、字母[a-zA-Z]、下划线_和短横线-这些组合，甚至是中文也行，但不能包含$、[、^、(、%等字符
- 大小写敏感
- 定义多个同名的变量时，变量的覆盖规则会是由CSS选择器的权重来决定的
选择器{
--变量名: 变量值;
}
使用变量
- 在{}声明块中以var()函数使用
- var()会返回变量的值，第一个参数为变量名，第二个参数为默认值，当该变量没有被定义的时候，会返回默认值（可以不写第二个参数）
选择器{
css属性: var(--变量名 [, 默认值]);
}
变量计算
- 在{}声明块中以calc()函数使用
例子
<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);
}