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