初学bem架构-sass-vue3-vite

bem架构能够很清晰的规定一套属于当前项目的样式以及结构方案.
在规定好bem之后,书写样式以及结构很方便.
下面是使用bem架构来完成的后常见的侧边栏布局

首先是声明bem文件

在项目中创建bem.scss, 我创建在./src/bem.scss

$namespace:'l' !default;
$block-sel:'-' !default;
$elem-sel:'__' !default;
$mod-sel:'--' !default;

//block
//      l-header
@mixin b($block){
  $B:#{$namespace + $block-sel + $block};
  .#{$B}{
    @content;
  }
}

//element
@mixin e($el){
  $selector:&;   //代表父级
  @at-root {
    #{$selector + $elem-sel + $el}{
      @content
    }
  }
}

//modify
@mixin m($m){
  $selector:&;
  @at-root {
    #{$selector + $mod-sel + $m}{
      @content;
    }
  }
}

//开启bfc
@mixin bfc {
  height: 100%;
  overflow: hidden;
}

然后在vite.config.ts中引入

引入之后:

export default defineConfig({
  plugins: [vue()],
  css:{
    preprocessorOptions:{
      scss: {
        additionalData: `@import "./src/bem.scss";`
      }
    }
  }
})

配置完成了,使用架构编写项目

项目分析

项目分为nav,header,content, 将这3个组件放在contents组件中. 在app.vue中引入contents组件

在contents组件中写样式:

@include b(box){  //  类名为l-box的盒子的样式
  @include bfc;  //使用自定义的bfc
  display: flex;  
  @include e(right){  //l-box__right
    display: flex;
    flex-direction: column;
    flex:1;
  }
}

nav组件中

@include b(nav){  //类名为l-nav的样式
  min-width: 200px;
  border-right: 1px solid black;
  height: 100%;
}

header组件中

@include b(headBox){
  height: 60px;
  border-bottom: 1px solid black;
}

content组件中

@include b(conBox) { //类名为l-conBox的盒子的样式
  flex: 1;
  overflow: auto;
  @include e(items){  //类名为l-conBox__items的盒子的样式
    padding: 10px 0 10px 0;
    border: 1px solid black;
    border-radius: 5px;
    margin-top: 10px;
  }
}

完成