css中关于var()函数的作用和使用方法

基本用法

:root {
    --color: #999;
}

.wrap {
    width: 100px;
    height: 100px;
    background-color: var(--color);
}

/* :root是一个伪类，表示文档根元素，非IE及ie8及以上浏览器都支持 */
/* 在:root中声明相当于全局属性，只要有页面引用了此文件，就可以用var()引用定义过的属性 */

备用属性

:root {
    --color: #999;
}

.wrap {
    width: 100px;
    height: 100px;
    background-color: var(--color, #000);
    /* var的后面还可以跟一个备用属性参数，如上，当--color找不到的时候，用#000代替 */
}

计算

:root {
    --color: #999;
    --size: 2;
}

.wrap {
    width: 100px;
    height: 100px;
    background-color: var(--color, #000);
    border: calc(var(--size)*1px) solid #299;
    /* var和calc是一个比较常用的组合 */
    /* 当var和calc使用的时候，var所获取的对象只能为数字，外乘或除(n)px */
    /* 注意类似px这种单位不能直接跟在var的后面，例如font-size:calc(2*var(--size)px);这种写法是错误的 */
}