How css-theme generates a style file containing multiple sets of skin configurations through source code

The content of this article is about how css-theme generates a style file containing multiple sets of skin configurations through source code. It has certain reference value. Friends in need can refer to it. I hope it will be useful to you. helped.

css-theme

Generate multiple themes through a single css file and merge them into one css file

Features

Load only one css, switch themes instantly by switching rootClass

Volume compression, merge multiple sets of css, remove redundant code, and avoid file size expansion

Low intrusion, does not change the existing development model, one modification takes effect globally

Installation

$ npm i css-theme --save-dev

Use

css writing

Use placeholders in css where the theme needs to change. The placeholder can be any string.
You can also inject these placeholders into css files through preprocessor variables.

@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 plug-in mode

Call the theme plug-in in the gulp task. For details, see demo/gulp

var cssTheme = require('css-theme').gulp; // gulp-plugin
var themeConfig = require('./theme.config'); // configs

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

less plug-in mode

Insert theme middleware when calling less through tools such as gulp/webpack. For details, see 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'));
});

Configuration

placeholder: placeholder, describing the placeholder corresponding to each variable in the css file

list: theme list

list.targetMap: The value corresponding to each variable in the theme

list.rootClass: The class added at the top level when using this theme

list.default: Whether to use this theme as The default theme, which is displayed by default when no class is specified

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

The above is the detailed content of How css-theme generates a style file containing multiple sets of skin configurations through source code. For more information, please follow other related articles on the PHP Chinese website!