兼容大部分框架的换肤方案

源起

---

换肤方案网上很多，比较著名的有elementui提供的方案，还有less动态编译（在module下编译不灵，需要import ‘x.less’,不能是import style from ‘x.less’），今天给大家提供的方案是百试百灵，操作难度也不大！

场景假设

---

假设有一个场景，用户切换指定主题，页面样式发生变化，主题的个数是固定的，我们最简单的方案是加id，不同的id对应不同的主题，用户切换的时候，只需要修改id即可。但是这个方案有两个问题，第一个问题，代码你需要写多套，冗余性，第二个问题一次性加载这么多主题，带宽消耗有点大。

上述方案解决

---

按照不同的项目，上述方案解决的方法有好几种，我们来随便说一个优化的方案，也是本文的重点

• 第一，我们可以把需要改的样式抽取，公共的还是按照原来的写在一起，比如原来的css

.test {
	width: 100%;
	height: 100%;
	background: #fff;
}

我们只需要把background抽取出来即可

#id1 {
	.test {
	    background: #ff0;
	}
}

#id2 {
	.test {
	    background: #0f0;
	}
}

• 第二，我们可以使用变量，比如less，可以使用@theme: #ff0，其他语言，大家可以自行百度，

#id1 {
    @theme: #ff0
	.test {
	    background:  @theme;
	}
}

#id2 {
    @theme: #ff0
	.test {
	    background: @theme;
	}
}

大家注意到细节没，@theme是写在id里面的，这是为了防止全局污染，以上两点都是在抽取不同的部分，减少带宽，但是如果只想写一套，又不想用id呢！

• 第三，使用css变量配合js

a.css
:root {
    --theme-color: #ff0;
}

用户点击触发了js，把这个css作为link或者style插入head即可，css树就会自动合成，样式就会自动修改啦！

.test {
	background: var(--theme-color,  #ff0);
}

上面的第二个参数是默认值，为了防止用户刚开始进来样式不显示，现在只需要维护css的变量即可！

方案优势

---

虽然比不上element-ui那么先进，但是代码量，可行性，兼容性提高了不少！当然这也不是唯一的方案，大家还是要根据自己的项目，选择合适的方案！

尾声

---

今天的分享就到这里了，感谢大家的阅读，希望大家多多捧场！