如何动态切换页面的可选肤色

最新推荐文章于 2025-07-07 20:27:22 发布

weixin_34401479

最新推荐文章于 2025-07-07 20:27:22 发布

阅读量95

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/chenxiangling/p/10901390.html

博客以less为例，介绍动态切换背景肤色的方法，给出了编译结果，如.theme - green.container背景色为绿色，.theme - red.container背景色为红色。

以下以less为例(其他框架的使用原理都相同)来描述如何动态切换背景肤色：

1.创建var.less存放样式变量

//绿色

@green-background-color: green;

//红色

@red-background-color: red;

2.创建mixin.less存放混合器 //注：&符号为嵌套外层的父选择器，放在.them-green前面则被拼接到.theme-green前面,放在.theme-green后面则被拼接到后面

.mixin-background() {

　　.theme-green & {

　　　　background-color: @green-background-color;

　　}

　　.theme-red & {

　　　　background-color: @red-background-color;

　　}

}

3.在样式中使用混合器

.container{

　　.mixin-background;

}