适用场景:.
1.原生css,scss还是less,都能使用
2.兼容ie9,ie10,ie11
废话不多说,直接上原理(基于css变量实现的)
1.直接使用css变量,实现颜色或者其他属性的改变
2.动态添加新的css变量,层叠掉之前的变量
3.完成
ie兼容处理:
1.遍历所有样式,将里面不兼容的css变量全部替换成对应的颜色或属性
2.删除掉不兼容的样式
3.插入新生成的样式
上代码:
theme.css
html:
less:
js:
效果图:
谷歌:
ie: