Common skin changing schemes:
- Style overlay, using the principle of CSS priority to override the implementation of the original style
- 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
- 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
-
Isolate the SCSS common to all UI components into a topic base class
-
Each topic inherits from the base class and writes its own topic variable file
-
Each topic is packaged separately into its own lib file using gulp, moved and renamed using the CP-CLI library
-
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