基本用法

:root {
    --color: #999;
}

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

/* :root是一個(gè)偽類，表示文檔根元素，非IE及ie8及以上瀏覽器都支持 */
/* 在:root中聲明相當(dāng)于全局屬性，只要有頁(yè)面引用了此文件，就可以用var()引用定義過的屬性 */

備用屬性

:root {
    --color: #999;
}

.wrap {
    width: 100px;
    height: 100px;
    background-color: var(--color, #000);
    /* var的后面還可以跟一個(gè)備用屬性參數(shù)，如上，當(dāng)--color找不到的時(shí)候，用#000代替 */
}

計(jì)算

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

.wrap {
    width: 100px;
    height: 100px;
    background-color: var(--color, #000);
    border: calc(var(--size)*1px) solid #299;
    /* var和calc是一個(gè)比較常用的組合 */
    /* 當(dāng)var和calc使用的時(shí)候，var所獲取的對(duì)象只能為數(shù)字，外乘或除(n)px */
    /* 注意類似px這種單位不能直接跟在var的后面，例如font-size:calc(2*var(--size)px);這種寫法是錯(cuò)誤的 */
}