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

scss 预处理器自定义ui框架(bem架构)

BEM架构

bem架构

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

BEM 命名约定的模式是:

.block {}
 
.block__element {}
 
.block--modifier {}

scss 预处理器自定义ui框架

  1. 在项目中安装sass依赖
  2. 新建bem.scss文件(内容如下)
// 定义值和连接符 
$namespace:'xm' !default;
$block-sel:'-' !default;
$elem-sel:'__' !default;
$mod-sel:'--' !default;



// 可以写混入
// <div class = 'xm-block'/>
@mixin b($block){
  //  $ —— 定义拼接好的类名
  $B:#{$namespace+$block-sel+$block};
  // #{} —— 使用动态类名或名称
  .#{$B}{
    @content; // 内容替换
  }
};
// <div class = 'xm-block__inner'/>
@mixin e($el){
  //  $ —— 定义父级的类名 (& —— 父级的类名)
  $selector: &; 
  // 跳出嵌套 —— @at-root{}
  @at-root{
    #{$selector+$elem-sel+$el}{
      @content
    };
  }
}
// <div class = 'xm-block--xxx'/>
@mixin m($m){
  //  $ —— 定义父级的类名 (& —— 父级的类名)
  $selector: &; 
  // 跳出嵌套 —— @at-root{}
  @at-root{
    #{$selector+$mod-sel+$m}{
      @content
    };
  }
}

  1. 在vite.config.ts进行配置
    在这里插入图片描述
css:{
    preprocessorOptions:{
      scss:{
        additionalData: `@import './src/bem.scss';`,
      }
    }
  }
  1. 在页面中进行使用
    效果图:
    在这里插入图片描述
<template>
	<div class="xm-test">
		自定义scss预处理器-Box
		<div class="xm-test__elem">自定义scss预处理器-content</div>
		<div class="xm-test--nice">自定义scss预处理器-style</div>
	 </div>
</template>
<style scoped lang="scss">
// xm-test为父级box — b
@include b('test') {
	color: red;
	font-size: 20px;
	//xm-test__elem 为里面的内容  __e
	@include e('elem') {
		color: blue;
		font-size: 20px;
	}
	//xm-test--nice 为内容的样式 --m
	@include m('nice') {
		color: green;
		font-size: 20px;
	}
}
</style>

http://www.kler.cn/a/37649.html

相关文章:

  • 奇奇怪怪的知识点-EXCEL(1)
  • 如何给合宙ESP32-C3刷写arduino固件,arduinoIDE的配置,测试代码
  • Netty 编解码技术
  • mysql查询优化
  • ipv6 问题排查
  • 【项目部署】原生部署SpringBoot项目
  • 到天宫做客
  • 节点互信or秘钥登录
  • 电动汽车路由问题的基准测试
  • Jina AI 受邀出席 WAIC 2023「科技无障碍」论坛,与行业专家共话 AI 普惠未来
  • 机器学习随机森林笔记
  • Java 中的反射是什么?如何使用它?
  • 【玩转Linux操作】Linux进程(进程基本介绍,父子进程,终止进程,进程树)
  • linux进程间通信的本质
  • 【Linux系统】Linux多线程详解
  • java导出pdf(纯代码实现)
  • 容器化部署 rocketmq-dashboard
  • 山东农信:一云多芯助力金融活水普惠齐鲁大地
  • MySQL - OJ 练习(23道)
  • 按键精灵、auto.js等一些移动端脚本 如何连接云服务器的数据库, 进行读写操作