基于组件库换肤方案的设计于实现

时间:2021-2-20 作者:admin

常见的换肤方案:

  1. 样式覆盖,利用css优先级的原理覆盖掉原有样式的实现
  2. 生成多套css 通过编译工具与构建工具编译出多套皮肤css,通过js动态的link对应的皮肤样式
  3. css3变量
    缺点: 部分浏览器兼容性

组件库换肤方案的实现

前沿

组件库的命名规范 BEM
BEM代表块(Block),元素(Element),修饰符(Modifier)

针对于不同的项目的换肤

以alert组件为例说一下思路

  1. 将所有UI组件公共的scss抽离成一个主题基类

  2. 每一个主题都继承于基类,并编写各自的主题变量文件

  3. 每个主题利用gulp独立打包为各自的lib文件,利用cp-cli库移动并改名

  4. 根据项目引入不同的主题文件即可

代码实现过程

目录结构:theme 主题基类、theme-peiyou 主题peiyou、theme-test主题测试

基类中alert文件的代码:
@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;
}

test主题中alert文件代码,所有的文件变量都在var文件中,不同的主题修改var文件即可:
@import "mixins/mixins";
@import "common/var";
@import "../../theme/alert.scss"
使用glup将每个主题文件中所有的scss文件打包为css文件

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)

var变量文件中的内容
$--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 !default

打包时候并移动修改文件名字即可完成主题
 "build:test":  "gulp build --gulpfile packages/theme-test/gulpfile.js && cp-cli packages/theme-test/lib lib/theme-test",

针对于同一个项目的换肤

在基类文件中对将部分属性样式通过css3变量方式暴露给使用者
@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;
}

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。