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(&＃39;css-theme&＃39;).gulp; // gulp-plugin
var themeCOnfig= require(&＃39;./theme.config&＃39;); // configs

less({
  plugins:[new LessPluginTheme(themeConfig)]
})

less插件模式

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

var LessPluginTheme = require(&＃39;css-theme&＃39;).less; // less-plugin
var themeCOnfig= require(&＃39;./theme.config&＃39;); // configs

gulp.task(&＃39;default&＃39;, function() {
  return gulp.src(&＃39;./index.less&＃39;)
    .pipe(less())
    .pipe(cssTheme(themeConfig))
    .pipe(gulp.dest(&＃39;./dist&＃39;));
});

配置

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

list: 主题列表

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

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

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

module.exports = {
  &＃39;placeholder&＃39;: {
    &＃39;dark&＃39;: &＃39;#theme1&＃39;,
    &＃39;light&＃39;: &＃39;#theme2&＃39;
  },
  &＃39;list&＃39;: [
    {
      &＃39;default&＃39;: false,
      &＃39;targetMap&＃39;: {
        &＃39;dark&＃39;: &＃39;#ff6a3a&＃39;,
        &＃39;light&＃39;: &＃39;#ffa284&＃39;,
      },
      &＃39;rootClass&＃39;: &＃39;skin_orange&＃39;
    },
    {
      &＃39;default&＃39;: false,
      &＃39;targetMap&＃39;: {
        &＃39;dark&＃39;: &＃39;#fdd000&＃39;,
        &＃39;light&＃39;: &＃39;#ffd71c&＃39;,
      },
      &＃39;rootClass&＃39;: &＃39;skin_yellow&＃39;
    }
  ]
};

以上就是css-theme如何通过源码生成一份包含多套皮肤配置的样式文件的详细内容，更多请关注 第一PHP社区 其它相关文章！