BEM架构

BEM架构

bem架构

它是一种css架构 oocss 实现的一种 (面向对象css) ,BEM实际上是block、element、modifier的缩写,分别为块层、元素层、修饰符层,element UI 也使用的是这种架构

BEM 命名约定的模式是:

.block {}
 
.block__element {}
 
.block--modifier {}

scss 预处理器自定义ui框架

  1. 在项目中安装sass依赖
  2. 新建bem.scss文件(内容如下)
// 定义值和连接符 
$namespace:'xm' !default;
$block-sel:'-' !default;
$elem-sel:'__' !default;
$mod-sel:'--' !default;



// 可以写混入
// <div class = 'xm-block'/>
@mixin b($block){
  //  $ —— 定义拼接好的类名
  $B:#{$namespace+$block-sel+$block};
  // #{} —— 使用动态类名或名称
  .#{$B}{
    @content; // 内容替换
  }
};
// <div class = 'xm-block__inner'/>
@mixin e($el){
  //  $ —— 定义父级的类名 (& —— 父级的类名)
  $selector: &; 
  // 跳出嵌套 —— @at-root{}
  @at-root{
    #{$selector+$elem-sel+$el}{
      @content
    };
  }
}
// <div class = 'xm-block--xxx'/>
@mixin m($m){
  //  $ —— 定义父级的类名 (& —— 父级的类名)
  $selector: &; 
  // 跳出嵌套 —— @at-root{}
  @at-root{
    #{$selector+$mod-sel+$m}{
      @content
    };
  }
}

在vite.config.ts进行配置


css:{
    preprocessorOptions:{
      scss:{
        additionalData: `@import './src/bem.scss';`,
      }
    }
  }

在页面中进行使用
效果图:


<template>
    <div class="xm-test">
        自定义scss预处理器-Box
        <div class="xm-test__elem">自定义scss预处理器-content</div>
        <div class="xm-test--nice">自定义scss预处理器-style</div>
     </div>
</template>
<style scoped lang="scss">
// xm-test为父级box — b
@include b('test') {
    color: red;
    font-size: 20px;
    //xm-test__elem 为里面的内容  __e
    @include e('elem') {
        color: blue;
        font-size: 20px;
    }
    //xm-test--nice 为内容的样式 --m
    @include m('nice') {
        color: green;
        font-size: 20px;
    }
}
</style>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容