Based on the component library skin scheme design in implementation

Common skin changing schemes:

1. Style overlay, using the principle of CSS priority to override the implementation of the original style
2. Generate multiple sets of CSS through compiling tools and building tools to compile multiple sets of skin CSS, through THE JS dynamic link corresponding to the skin style
3. Disadvantages of CSS3 variables: Partial browser compatibility

4. Use the namespace to write different styles 5. Dynamic skin, interaction with the back end, the modified parameters package to the back end, the back end of the new generated style back to the front end, write style style

Implementation of component library skin scheme

At the forefront of

Component library naming convention BEM BEM stands for Block, Element, Modifier

Peels for different projects

Take the Alert component as an example

1. Isolate the SCSS common to all UI components into a topic base class

2. Each topic inherits from the base class and writes its own topic variable file

3. Each topic is packaged separately into its own lib file using gulp, moved and renamed using the CP-CLI library

4. Introduce different theme files depending on the project

Code implementation process

Directory structure: Theme Theme base class, theme-peiYou theme PEIyou, theme-test Theme test

The code for the alert file in the base class:

@include b(alert) {
   width: 100%;
  padding: $--alert-padding;
  margin: 0;
  box-sizing: border-box;
  border-radius: $--alert-border-radius;
  position: relative;
  background-color: $--color-white;
  overflow: hidden;
  opacity: 1;
  display: flex;
  align-items: center;
  transition: opacity .2s;
}

Copy the code

Test theme alert file code, all file variables are in the var file, different theme modify var file can be:

@import "mixins/mixins"; @import "common/var"; @import ".. /.. /theme/alert.scss"Copy the code

Use GLUP to package all SCSS files in each topic file as CSS files

const { series, src, dest } = require('gulp') const sass = require('gulp-sass') const autoprefixer = require('gulp-autoprefixer') const cssmin = require('gulp-cssmin') function compile() { return src('./src/*.scss') .pipe(sass.sync()) .pipe( autoprefixer({  browsers: ['ie > 9', 'last 2 versions'], cascade: false }) ) .pipe(cssmin()) .pipe(dest('./lib')) } exports.build = series(compile)Copy the code

Var Contents of a variable file

$--alert-padding: 8px 16px ! default; $--alert-title-font-size: 13px ! default; $--alert-description-font-size: 12px ! default; $--alert-close-font-size: 12px ! default; $--alert-close-customed-font-size: 13px ! defaultCopy the code

The theme is completed by moving and changing the file name while packaging

 "build:test":  "gulp build --gulpfile packages/theme-test/gulpfile.js && cp-cli packages/theme-test/lib lib/theme-test",

Copy the code

Peels for the same project

Part of the attribute style is exposed to the user as cSS3 variables in the base class file

@include b(alert) {
 width: 100%;
 padding: var(--py-alert-padding,$--alert-padding);
 margin: 0;
 box-sizing: border-box;
 border-radius:var( --py-alert-border-radius, $--alert-border-radius);
 position: relative;
 background-color: $--color-white;
 overflow: hidden;
 opacity: 1;
 display: flex;
 align-items: center;
 transition: opacity .2s;
}
Copy the code