欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue3配置bem樣式架構(gòu)的代碼詳解

 更新時間：2024年10月24日 10:35:46   作者：孫懟懟啊  
BEM是一種前端命名方法論,主要是針對CSS,意思是塊（Block）、元素（Element）、修飾符（Modifier）的簡寫,這種命名方法讓CSS便于統(tǒng)一團隊開發(fā)規(guī)范和方便維護,本文給大家介紹了Vue3配置bem樣式架構(gòu),需要的朋友可以參考下

BEM的組成

  • Block 塊獨立實體，獨立的意義
  • Element 元素block的一部分，沒有獨立的意義。語意上和block有關(guān)系
  • Modifier 修飾符block或element上的標記。使用他來改變外觀或行為

上代碼

首先我們需要再vue3項目中創(chuàng)建一個用于保存bem樣式文件的地方

在這里插入圖片描述

其次，bem.scss內(nèi)文件代碼為

// bem 架構(gòu)
$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樣式架構(gòu)算是完成了，這樣的命名規(guī)范真的很舒服，很簡潔，維護起來也很方便

到此這篇關(guān)于Vue3配置bem樣式架構(gòu)的代碼詳解的文章就介紹到這了,更多相關(guān)Vue3配置bem內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論