zoukankan      html  css  js  c++  java
  • 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'
        }
      ]
    };

    链接

    Questions

    Github

    授权

    MIT

  • 相关阅读:
    模拟退火大法好
    宿命的PSS
    博客在summeroi.top上更新
    SPFA模板
    BZOJ 4551: [Tjoi2016&Heoi2016]树
    BZOJ 4152: [AMPPZ2014]The Captain
    BZOJ 3930: [CQOI2015]选数
    BZOJ 3875: [Ahoi2014&Jsoi2014]骑士游戏
    BZOJ4318: OSU!
    BZOJ3170: [Tjoi 2013]松鼠聚会
  • 原文地址:https://www.cnblogs.com/10manongit/p/12692962.html
Copyright © 2011-2022 走看看