CSS變量使用示例

主題CSS變量的使用遵循W3C規(guī)范，主題默認(rèn)提供了色彩變量。使用時(shí)候僅使用即可。

例，現(xiàn)有HTML代碼如下：

<span class="sample">
    文本示例
</span>

需要：
將顏色修改為“主色調(diào)”、并添加1像素的“灰度7”作為邊框，原則上我們這樣寫(xiě)：

.sample {
    color: #20A0FF; //主色調(diào)
    border: 1px solid #D8E0EA; //邊框
}

若修改為使用主題的色彩變量，根據(jù)上一節(jié)我們的變量名，應(yīng)該寫(xiě)為：

.sample {
    color: var(--primary_default);
    border: 1px solid var(--gray_7);
}

由于IE系列及較舊的瀏覽器不支持CSS色彩變量，如果直接寫(xiě)為上面的效果將導(dǎo)致無(wú)法正常顯示，因此需要使用無(wú)變量的寫(xiě)法來(lái)作為回退機(jī)制：

.sample {
    color: #20A0FF;
    color: var(--primary_default);
    border: 1px solid #D8E0EA;
    border: 1px solid var(--gray_7);
}

這樣，既支持變量，又支持舊版瀏覽器回退的CSS代碼就完成了。在主題后臺(tái)修改主色調(diào)后，這個(gè)HTML中的文本顏色也會(huì)跟著主色調(diào)自動(dòng)修改。