Home >Web Front-end >CSS Tutorial >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 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; } }
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)] })
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')); });
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!