css变量

定义变量

在{}声明块中定义
变量名：-- 双横杠开头，后面可以是数字[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);
}