首页>文档>Rouse开发文档>CSS变量使用示例

需要支持?

如果通过文档没办法解决您的问题,请提交工单获取我们的支持!

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

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索