BEM架构
bem架构
它是一种css架构 oocss 实现的一种 （面向对象css） ，BEM实际上是block、element、modifier的缩写，分别为块层、元素层、修饰符层，element UI 也使用的是这种架构
BEM 命名约定的模式是：
.block {}
.block__element {}
.block--modifier {}
scss 预处理器自定义ui框架
- 在项目中安装sass依赖
- 新建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>
