网站换肤方案二：混入+映射

利用混入收敛换肤逻辑，可以使用less的映射、混入或scss的map-get、混入，通过修改html的自定义属性data-theme，加载不同的变量

以scss的实现方案举例：

• 实现思路

第一步：定义一个map，定义不同主题下，不用元素使用的色值

第二步：在mixin中，通过data-theme，结合map-get设置不同主题下某个属性使用的map之中定义的value

第三步：在页面中通过@include引入mixin

• 具体实现

#第一步variable.scss

$colors-light: (
    fill-1: #fff,
    text: #3c3c3c,
    text-1: #757575,
    text-2: #222,
);
$colors-dark: (
    fill-1: #222,
    text: #fff,
    text-1: rgba(255, 255, 255, 0.3),
    text-2: #ffcd32,
);

#第二步mixin.scss

// 背景色
@mixin bg-color($key) {
    background-color: map-get($colors-light, $key);
    [data-theme="dark"] & {
        background-color: map-get($colors-dark, $key);
    }
}
// text色
@mixin text-color($key) {
    color: map-get($colors-light, $key);
    [data-theme="dark"] & {
        color: map-get($colors-dark, $key);
    }
}

#第三步page.scss

.realist {
    .list-title {
         height: 40px;
	 line-height: 40 px;
	 text-align: center;
	 @include text-color(text-1);
	}
}

这个方案与第一个相比较而言，更适合新建项目时候的开发，如果是对旧项目的改造，存在一个弊端： 逻辑层次很明确的三层，后期维护性很强。但是就项目改造的话，也是因为会造成前期开发周期比较长的问题

用less开发的话

#第一步variable.less

.colors-light(){
    @fill-1: #fff,
    @text: #3c3c3c,
    @text-1: #757575,
    @text-2: #222,
}
.colors-dark(){
    @fill-1: #222,
    @text: #fff,
    @text-1: rgba(255, 255, 255, 0.3),
    @text-2: #ffcd32,
}

#第二步mixin.less

// 背景色
.text-color(@key) {
    color:.colors-light[@@key] ;//涉及到less的映射
    [data-theme="dark"] & {
        color: .colors-black[@@key] ;
    }
}

#第三步page.less

.realist {
    .list-title {
         height: 40px;
	 line-height: 40 px;
	 text-align: center;
	 .text-color(fill-1)
         //.text-color(@fill-1)//直接写死fill-1或者再定义个fill-1变量	}
}

以上再加上初始化主题、切换主题修改data-theme属性就可以达到换肤效果

之前的代码上出现过一个问题

之前是这样写的：

.text-color(@key:fill1) {    [data-theme="deep-dark"] & {        color: .colors-black[@key] ;    }    [data-theme="deep-white"] & {       color: .colors-light[@key] ;    }}

.colors-light{    fill1: red;}

本来以为.text-color(@key)可以再之后的属性中直接使用@key,但是会报错

Variable @key not found

然后才改成了上面中@@,我能理解@key=full1,@@key=@full1，从而找到映射。

但是为什么报错的这种写法不行，有大神看到了望解答一下