视频网站开发周期,一个网站的建站流程,营销网站建设视频,建行官网的网址文章目录 简介语法在vue3项目中引用sass创建bem.scss文件修改vite.config.tsvue文件中使用结果 这是我学习记录的笔记#xff0c;如有不正#xff0c;欢迎补充 简介
首先认识一下什么是bem架构#xff1f;BEM的意思就是块#xff08;block#xff09;、元素#xff08;e… 文章目录 简介语法在vue3项目中引用sass创建bem.scss文件修改vite.config.tsvue文件中使用结果 这是我学习记录的笔记如有不正欢迎补充 简介
首先认识一下什么是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文件中使用
templatediv classxm-testgunalabutton classxm-test--success成功/button/div
/template//标注lang scssstyle langscss//test是b的参数表示拿到xm-test类include b(test){color:red;//嵌套//success是m的参数表示拿到的是xm-test--successinclude m(success){color: green;}}/style结果
