css-theme
通过单一css文件生成多套主题,并合并入一个css文件中
特性
- 只加载一个css,通过切换rootClass瞬间切换主题
- 体积压缩,将多套css合并,去除冗余代码,避免文件体积膨胀
- 低侵入性,不改变现有开发模式,一处修改,全局生效
安装
$ npm i css-theme --save-dev
使用
css编写
在css中需要根据主题变化的地方使用占位符,占位符可以是任何字符串。 你也可以通过预处理器变量的方式向css文件注入这些占位符。
@dark: ;@light: ; .container .text1 font-size: 16px; color: ; line-height: normal; .text2 font-size: 14px; color: @dark; line-height: normal; .text2 font-size: 14px; color: @light; line-height: normal;
gulp插件模式
在gulp任务中调用theme插件。详见 demo/gulp
var cssTheme = gulp; // gulp-pluginvar themeConfig = ; // configs
less插件模式
在通过gulp/webpack等工具调用less时,插入theme中间件。详见 demo/less
var LessPluginTheme = less; // less-pluginvar themeConfig = ; // configs gulp;
配置
placeholder: 占位符,描述每个变量在css文件中对应的占位符
list: 主题列表
list.targetMap: 该主题中每个变量对应的值
list.rootClass: 使用该主题时顶层添加的class
list.default: 是否将该主题作为默认主题,在未指定class时默认展示该主题
moduleexports = 'placeholder': 'dark': '#theme1' 'light': '#theme2' 'list': 'default': false 'targetMap': 'dark': '#ff6a3a' 'light': '#ffa284' 'rootClass': 'skin_orange' 'default': false 'targetMap': 'dark': '#fdd000' 'light': '#ffd71c' 'rootClass': 'skin_yellow' ;