文章目錄
- 簡介
- 語法
- 在vue3項目中引用
- sass
- 創建bem.scss文件
- 修改vite.config.ts
- vue文件中使用
- 結果
這是我學習記錄的筆記，如有不正，歡迎補充
簡介
首先認識一下什么是bem架構？BEM的意思就是塊（block）、元素（element）、修飾符（modifier）,是由Yandex團隊提出的一種前端命名方法論。這種巧妙的命名方法讓你的CSS類對其他開發者來說更加透明而且更有意義。BEM命名約定更加嚴格，而且包含更多的信息，它們用于一個團隊開發一個耗時的大項目。
語法
看一下其中的class類，el-divider el-divider–horizontal m-0
這里加入一個類el-divider__inner
- el表示namespace（命名空間）
- -（）表示block（塊）
- __（）雙下劃線表示element（元素）
- -- 雙-號表示modidier（修飾符）
在vue3項目中引用
sass
在引用之前需要先了解一下sass
這里我就不具體講解了，我把必要的了解說一下：
- 嵌套規則 (Nested Rules)
- 父選擇器 &
- 變量 $
- @at-root
- 占位符#{}
- 定義混合指令 @mixin
- 引用混合樣式 @include
這些可以在官方文檔中查看，我想只要學過css，入門sass也是喝喝水了。
創建bem.scss文件
這里面寫我們的bem架構規則。
//注意：這里的xm是自定義的namespace
$namespace: "xm" !default;
$block-sel: "-" !default;
$elem-sel: "__" !default;
$mod-sel: "--" !default;@mixin b($block) {$B: #{$namespace + $block-sel + $block};.#{$B} {//占位符，替代編寫的css樣式@content;}
}@mixin e($elem) {$seletor: &;$E: #{$seletor + $elem-sel + $elem};@at-root {//跳出父級作用域#{$E} {//占位符，替代編寫的css樣式@content;}}
}@mixin m($modifier) {$seletor: &;$M: #{$seletor + $mod-sel + $modifier};@at-root {#{$M} {//占位符，替代編寫的css樣式@content;} }
}這個文件可以直接引用到項目中，改一下命名空間就行。
修改vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],css: {preprocessorOptions: {scss: {//bem文件的位置additionalData: `@import "./src/bem.scss";`}}}
})
vue文件中使用
<template><div class="xm-test">gunala<button class="xm-test--success">成功</button></div>
</template>//標注lang = "scss"<style lang="scss">//test是b的參數，表示拿到xm-test類@include b(test){color:red;//嵌套//success是m的參數，表示拿到的是xm-test--success@include m(success){color: green;}}</style>
結果
)
)
