当前位置：首页 > article >正文

08 vue3之认识bem架构及less sass 和scoped

article 2024/11/15 4:32:01

bem架构

他是一种css架构 oocss 实现的一种（面向对象css），BEM实际上是block、element、modifier的缩写，分别为块层、元素层、修饰符层，element UI 也使用的是这种架构

1. BEM架构

1. 介绍

1. BEM是Block Element Modifier的缩写

2. Block：块，代表一个独立的模块，如：header、container、menu

3. Element：元素，代表块中的组成部分，如：header__logo、menu__item

4. Modifier：修饰符，代表块或元素的不同状态，如：menu__item_active、menu__item_disabled

BEM 命名约定的模式是：

.block {} // el-input 代表码一个块

.block__element {} // el-input__inner 代表一个元素或者内容

.block--modifier {} //el-button--success 样式一样颜色不同可自定义修饰符

使用sass 最小单元复刻一个bem 架构

// 使用sass 最小单元复刻一个bem 架构
$block-sel: "-" !default;
$element-sel: "__" !default;
$modifier-sel: "--" !default;
$namespace: "ck" !default;
@mixin bfc {
  height: 100%;
  overflow: hidden;
}

//混入
@mixin b($block) {
  $B: $namespace + $block-sel + $block; //变量
  .#{$B} {
    //插值语法#{}
    @content; //内容替换
  }
}

@mixin flex {
  display: flex;
}

@mixin e($element) {
  $selector: &;
  @at-root {
    #{$selector + $element-sel + $element} {
      @content;
    }
  }
}

@mixin m($modifier) {
  $selector: &;
  @at-root {
    #{$selector + $modifier-sel + $modifier} {
      @content;
    }
  }
}

全局引入bem.css

不能直接再app.vue以@import url();是无效的

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';"
            }
        }
    }
})

在页面中使用

<template>
  <div class="ck-wraps">
    块级
    <div class="ck-wraps__right">
      元素
      <span class="ck-wraps--success">修饰符</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
</script>

<style lang="scss" scoped>
@include b("wraps") {
  color: red;
  @include e(right) {
    color: pink;
  }
  @include m(success) {
    color: blue;
  }
}
</style>

09 vue3之组件传参-CSDN博客文章浏览阅读2次。09 vue3之组件传参。https://blog.csdn.net/qq_37550440/article/details/142212697?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22142212697%22%2C%22source%22%3A%22qq_37550440%22%7D