CSS 变量使用示例

主题 CSS 变量的使用遵循 W3C 规范，主题默认提供了色彩变量。使用时候仅使用即可。

例，现有 HTML 代码如下：

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

需要：
将颜色修改为“主色调”、并添加 1 像素的“灰度 7”作为边框，原则上我们这样写：

1
.sample {
2
    color: #20A0FF; //主色调
3
    border: 1px solid #D8E0EA; //边框
4
}

若修改为使用主题的色彩变量，根据上一节我们的变量名，应该写为：

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

由于 IE 系列及较旧的浏览器不支持 CSS 色彩变量，如果直接写为上面的效果将导致无法正常显示，因此需要使用无变量的写法来作为回退机制：

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

这样，既支持变量，又支持旧版浏览器回退的 CSS 代码就完成了。在主题后台修改主色调后，这个 HTML 中的文本颜色也会跟着主色调自动修改。

阅读偏好