Vue3配置bem樣式架構的代碼詳解
更新時間：2024年10月24日 10:35:46 作者：孫懟懟啊
BEM是一種前端命名方法論,主要是針對CSS,意思是塊（Block）、元素（Element）、修飾符（Modifier）的簡寫,這種命名方法讓CSS便于統(tǒng)一團隊開發(fā)規(guī)范和方便維護,本文給大家介紹了Vue3配置bem樣式架構,需要的朋友可以參考下
BEM的組成
- Block 塊獨立實體，獨立的意義
- Element 元素block的一部分，沒有獨立的意義。語意上和block有關系
- Modifier 修飾符block或element上的標記。使用他來改變外觀或行為
上代碼
首先我們需要再vue3項目中創(chuàng)建一個用于保存bem樣式文件的地方
其次，bem.scss內(nèi)文件代碼為
// bem 架構
$namespace: "vat" !default; // 命名空間（可自定義，看心情）
$block-sel: "-" !default; // 塊級元素與命名空間之間的連接符（可自定義，看心情）
$element-sel: "__" !default; // 元素與塊級元素之間的連接符（可自定義，看心情）
$modify-sel: "--" !default; // 修飾符與元素之間的連接符（可自定義，看心情）
// 定義混入指令
@mixin block($block) {
// 創(chuàng)建一個類名變量
$B: #{$namespace + $block-sel + $block};
// 取動態(tài)類名賦值樣式
.#{$B} {
@content; // 占位符,用于填寫真實想要開發(fā)的樣式
}
}
// 定義混入指令
@mixin element($element) {
// 使用@at-root和#{&}可以引用父（在Sass中總是引用父選擇器）和插值，可以嵌套，做一些其他的事情
@at-root {
#{& + $element-sel + $element} {
@content; // 占位符
}
}
}
// 定義混入指令
@mixin modify($modify) {
// 使用@at-root和#{&}可以引用父（在Sass中總是引用父選擇器）和插值，可以嵌套，做一些其他的事情
@at-root {
#{& + $modify-sel + $modify} {
@content;// 占位符
}
}
}
// 定義混入指令
@mixin bfc {
height: 100%;
width: 100%;
overflow: hidden;
}
bem文件我們寫好了，接下來還需要配置一下才能全局生效
找到配置文件
css: {
preprocessorOptions: {
scss: {
additionalData: '@import "./src/styles/bem.scss";'
}
},
這里可以參考vite官方文檔來配置
然后來看看頁面代碼的實際使用方式
效果圖
到此為止，這里的bem樣式架構算是完成了，這樣的命名規(guī)范真的很舒服，很簡潔，維護起來也很方便
到此這篇關于Vue3配置bem樣式架構的代碼詳解的文章就介紹到這了,更多相關Vue3配置bem內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue中內(nèi)網(wǎng)/局域網(wǎng)/離線的情況下使用及建立項目方式
這篇文章主要介紹了vue中內(nèi)網(wǎng)/局域網(wǎng)/離線的情況下使用及建立項目方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了對 Vue-Router 進行單元測試的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
ElementUI下拉組件el-select一次從后端獲取選項并設置默認值方式
這篇文章主要介紹了ElementUI下拉組件el-select一次從后端獲取選項并設置默認值方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
本篇文章主要介紹了vue.js組件化開發(fā)實踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-12-12
這篇文章主要為大家詳細介紹了Vue3如何編寫一個?v-permission?指令來根據(jù)用戶權限動態(tài)控制元素的渲染,感興趣的小伙伴可以參考一下2024-12-12
vue中router.beforeEach()的簡單用法舉例
router.beforeEach()一般用來做一些進入頁面的限制,比如沒有登錄,就不能進入某些頁面,只有登錄了之后才有權限查看某些頁面,下面這篇文章主要給大家介紹了關于vue中router.beforeEach()的簡單用法舉例,需要的朋友可以參考下2023-01-01
vue中使用element ui的彈窗與echarts之間的問題詳解
這篇文章主要介紹了vue中使用element ui的彈窗與echarts之間的問題詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
vue el-date-picker動態(tài)限制時間范圍案例詳解
這篇文章主要介紹了vue el-date-picker動態(tài)限制時間范圍案例詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了Vue中組件的傳值方式詳解,Vue中最常見的組件之間的通信方式有12種，今天我們會詳細講解父傳子props方式和子傳父emit以及非父子組件傳值,需要的朋友可以參考下2023-08-08
vue項目本地開發(fā)完成后部署到服務器后報404錯誤解決方案
很多時候我們發(fā)現(xiàn)辛辛苦苦寫的VueJs應用經(jīng)過打包后在自己本地搭建的服務器上測試沒有什么問題,但真正放在服務器上后會發(fā)現(xiàn)或多或少的問題,這篇文章主要給大家介紹了關于vue項目本地開發(fā)完成后部署到服務器后報404錯誤的解決方案,需要的朋友可以參考下2024-01-01