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中的文本颜色也会跟着主色调自动修改。