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

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

news 2025/7/17 21:24:18

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