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;
}
}