方式
动态切换
动态色值
支持变量
实现复杂度
兼容性
性能
维护性
class切换方式
是
否
是
简单
良好
良好
ElementUI的实现
是
是
是
中等
良好
一般
编译时多主题全量构建
是
否
是
复杂
良好
一般
编译时选择性构建
否
否
是
中等
良好
良好
less变量
是
是
否
复杂
良好
差
css变量
是
是
是
中等
差
良好
import动态加载
是
否
否
简单
良好
良好
注:
动态切换:是否支持在运行时切换皮肤
动态设置:是否支持在运行时动态设置皮肤颜色
支持变量:是否可以再全局定义变量 less 文件,然后在不同的页面引用 less,依赖其中的变量,还是需要在全局 less 文件里面定义全局 class
实现复杂度: 需要修改的代码量包括构建工具和业务代码
兼容性: 主流浏览器支持程度
性能:包括代码的首屏加载的 size、切换的速度、切换的时候会不会有闪动
参考资料:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Alternative_style_sheets
https://less.bootcss.com