css-theme如何通过源码生成一份包含多套皮肤配置的样式文件

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

本篇文章给大家带来的内容是关于css-theme如何通过源码生成一份包含多套皮肤配置的样式文件,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

css-theme

通过单一css文件生成多套主题,并合并入一个css文件中

特性

只加载一个css,通过切换rootClass瞬间切换主题

体积压缩,将多套css合并,去除冗余代码,避免文件体积膨胀

低侵入性,不改变现有开发模式,一处修改,全局生效

安装

$ npm i css-theme --save-dev

使用

css编写

在css中需要根据主题变化的地方使用占位符,占位符可以是任何字符串。
你也可以通过预处理器变量的方式向css文件注入这些占位符。

@dark: #theme1; @light: #theme2;  .container {   .text1 {     font-size: 16px;     color: #theme1;     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 = require('css-theme').gulp; // gulp-plugin var themeConfig = require('./theme.config'); // configs  less({   plugins:[new LessPluginTheme(themeConfig)] })

less插件模式

在通过gulp/webpack等工具调用less时,插入theme中间件。详见 demo/less

var LessPluginTheme = require('css-theme').less; // less-plugin var themeConfig = require('./theme.config'); // configs  gulp.task('default', function() {   return gulp.src('./index.less')     .pipe(less())     .pipe(cssTheme(themeConfig))     .pipe(gulp.dest('./dist')); });

配置

placeholder: 占位符,描述每个变量在css文件中对应的占位符

list: 主题列表

list.targetMap: 该主题中每个变量对应的值

list.rootClass: 使用该主题时顶层添加的class

list.default: 是否将该主题作为默认主题,在未指定class时默认展示该主题

module.exports = {   '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'     }   ] };
本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » css-theme如何通过源码生成一份包含多套皮肤配置的样式文件

发表评论

提供最优质的资源集合

立即查看 了解详情