CSS變量使用示例

主題CSS變量的使用遵循W3C規范，主題默認提供了色彩變量。使用時候僅使用即可。

例，現有HTML代碼如下：

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

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

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

若修改為使用主題的色彩變量，根據上一節我們的變量名，應該寫為：

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

由于IE系列及較舊的瀏覽器不支持CSS色彩變量，如果直接寫為上面的效果將導致無法正常顯示，因此需要使用無變量的寫法來作為回退機制：

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

這樣，既支持變量，又支持舊版瀏覽器回退的CSS代碼就完成了。在主題后臺修改主色調后，這個HTML中的文本顏色也會跟著主色調自動修改。