【vue3】BEM架构、less scss和scoped

一、 BEM架构

BEM（Block, Element, Modifier）是一种命名约定，用于在编写 CSS 和 HTML 类名时创建可维护和可重用的样式。BEM 是一种常用的 CSS 命名规范，它的目的是减少样式之间的耦合，增加样式的可读性，并提高样式的复用性。

BEM 的三个主要概念：

1. Block（块）：Block 是一个独立的、可复用的组件或模块，它代表一个完整的功能单元。块是一个顶层的元素，它本身应该有意义并且可以独立存在。
2. Element（元素）：Element 是块的组成部分，它不能单独存在，必须依赖于块。Element 是块的一部分，它只有在块的上下文中才有意义。
3. Modifier（修饰符）：Modifier 是用于改变块或元素外观、状态或行为的标志。通过添加修饰符类名，可以修改块或元素的样式，从而实现不同的变体。

BEM 的命名约定（以element-plus为例）：

• el：namespace（element-plus所有样式都是el开头）
• -：block（代表块级区域）
• __：element（连接元素内容）
• --：modifier（修饰内容，例如 按钮颜色红、黄、蓝等）

二、less、scss、BEM架构

在项目中安装 npm install --save-dev sass 或 npm install --save-dev less

编写scss的bem架构，配置全局

1、src下面创建bem.scss文件，编写bem架构

$namespace:'yyx' !default;
$block-set:'-' !default;
$elem-set:'__' !default;
$mod-set:'--' !default;



@mixin b($block){ //block
    $B:$namespace+$block-set+$block;
    .#{$B}{
        @content
    }
}


@mixin e($elem){ //element

    $selector:&; //一个父级的变量

    //编译出来之后，不需要再佳航父级类名了 用@at-root
    @at-root{
        #{$selector+$elem-set+$elem}{
            @content
        }
    }

}


@mixin m($elem){ //modifier
    
    $selector:&; //一个父级的变量

    //编译出来之后，不需要再佳航父级类名了 用@at-root
    @at-root{
        #{$selector+$mod-set+$elem}{
            @content
        }
    }

}

2、在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:{
        additionalData:`@import "./src/bem.scss";`
      }
    }
  }
})

3、在vue组建中使用

<template>
    <p class="yyx-p">
        我是子组件
        <span class="yyx-p__inner">inner</span>
    </p>
</template>
    
<script setup lang='ts'>
</script>
    
<style lang="scss">
    @include b(p){
        color: red;
        @include e(inner){
            font-size: 40px;
            color: blue;
        }
    }
</style>