vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3配置bem

Vue3配置bem样式架构的代码详解

作者:孙怼怼啊

BEM是一种前端命名方法论,主要是针对CSS,意思是块(Block)、元素(Element)、修饰符(Modifier)的简写,这种命名方法让CSS便于统一团队开发规范和方便维护,本文给大家介绍了Vue3配置bem样式架构,需要的朋友可以参考下

BEM的组成

上代码

首先我们需要再vue3项目中创建一个用于保存bem样式文件的地方

在这里插入图片描述

其次,bem.scss内文件代码为

// bem 架构
$namespace: "vat" !default; //   命名空间(可自定义,看心情)
$block-sel: "-" !default; //    块级元素与命名空间之间的连接符(可自定义,看心情)
$element-sel: "__" !default; //    元素与块级元素之间的连接符(可自定义,看心情)
$modify-sel: "--" !default; //    修饰符与元素之间的连接符(可自定义,看心情)

// 定义混入指令
@mixin block($block) {
  // 创建一个类名变量
  $B: #{$namespace + $block-sel + $block};
  //   取动态类名赋值样式
  .#{$B} {
    @content; //  占位符,用于填写真实想要开发的样式
  }
}

// 定义混入指令
@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样式架构算是完成了,这样的命名规范真的很舒服,很简洁,维护起来也很方便

到此这篇关于Vue3配置bem样式架构的代码详解的文章就介绍到这了,更多相关Vue3配置bem内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文