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

以下以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;

}

编译结果
.theme-green .container{background-color: green;}

.theme-red .container{background-color: red;}