css-theme 經過一套源碼生成一份包含多套皮膚配置的樣式文件

時間 2019-12-04

標籤 css theme 經過一套源碼生成一份包含皮膚配置樣式文件欄目 CSS 简体版

原文原文鏈接

css-theme

經過單一css文件生成多套主題，併合併入一個css文件中css

特性

只加載一個css，經過切換rootClass瞬間切換主題
體積壓縮，將多套css合併，去除冗餘代碼，避免文件體積膨脹
低侵入性，不改變現有開發模式，一處修改，全局生效

安裝

$ npm i css-theme --save-dev

使用

css編寫

在css中須要根據主題變化的地方使用佔位符，佔位符能夠是任何字符串。
你也能夠經過預處理器變量的方式向css文件注入這些佔位符。webpack

@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/gulpgit

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/lessgithub

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文件中對應的佔位符web

list: 主題列表npm

list.targetMap: 該主題中每一個變量對應的值gulp

list.rootClass: 使用該主題時頂層添加的classbash

list.default: 是否將該主題做爲默認主題，在未指定class時默認展現該主題less

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'
    }
  ]
};