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

这篇具有很好参考价值的文章主要介绍了scss 预处理器自定义ui框架(bem架构)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

BEM架构

bem架构

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

BEM 命名约定的模式是:文章来源地址https://www.toymoban.com/news/detail-563206.html

.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进行配置
    scss 预处理器自定义ui框架(bem架构),scss,ui,前端
css:{
    preprocessorOptions:{
      scss:{
        additionalData: `@import './src/bem.scss';`,
      }
    }
  }
  1. 在页面中进行使用
    效果图:
    scss 预处理器自定义ui框架(bem架构),scss,ui,前端
<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>

到了这里,关于scss 预处理器自定义ui框架(bem架构)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 数据采集与预处理01: 项目1 数据采集与预处理准备

    数据采集:足够的数据量是企业大数据战略建设的基础,因此数据采集成为大数据分析的前站。数据采集是大数据价值挖掘中重要的一环,其后的分析挖掘都建立在数据采集的基础上。大数据技术的意义确实不在于掌握规模庞大的数据信息,而在于对这些数据进行智能处理,

    2024年01月25日
    浏览(59)
  • 数据预处理matlab matlab数据的获取、预处理、统计、可视化、降维

    1.1 从Excel中获取 使用readtable() 例1: 使用 spreadsheetImportOptions(Name,Value) 初步确定导入信息, 再用 opts.Name=Value 的格式添加。 例2: 先初始化 spreadsheetImportOptions 对象, 再用 opts.Name=Value 的格式逐个添加。 例3: 将导入信息存到变量里, 再使用 spreadsheetImportOptions(Name,Value)

    2024年02月15日
    浏览(54)
  • C语言——程序环境和预处理(再也不用担心会忘记预处理的知识)

    先简单了解一下程序环境,然后详细总结翻译环境里的编译和链接,然后在总结编译预处理。 在 ANSI C 的任何一种实现中,存在两个不同的环境 翻译环境:这个环境中源代码被转换为可执行的机器指令。 执行环境:执行二进制代码。 计算机如何执行二进制指令? 我们写的C语

    2024年02月09日
    浏览(55)
  • YOLOv7教程系列:一、基于自定义数据集训练专属于自己的目标检测模型(保姆级教程,含数据集预处理),包含对train.py/test.py/detect.py/export.py详细说明

    YOLOv7作为YOLO系列的又一大巅峰之作,下面将介绍利用自己的数据集训练YOLOv7模型。 github代码链接:https://github.com/WongKinYiu/yolov7 目前版本为v0.1 运行环境如下: ubuntu20.04 cuda11.0 cudnn8.0.4 python3.8 torch1.12.0 torchvision0.11.0 在data目录下新建Annotations, images, ImageSets, labels 四个文件夹 i

    2024年01月22日
    浏览(47)
  • 图像预处理算法————灰度化处理

    图像预处理算法适合在FPGA上完成,原理简单且需要快速处理,通常有灰度化、中值、均值滤波等,以及颜色空间转换算法。 灰度图像是一种特殊的彩色图像(R=G=B的彩色图像) 只有一种颜色分量,单通道的0-255 方法:一般有分量法、最大值法、平均值法、加权平均法四种方

    2024年01月17日
    浏览(47)
  • 大数据采集技术与预处理学习一:大数据概念、数据预处理、网络数据采集

    目录 大数据概念: 1.数据采集过程中会采集哪些类型的数据? 2.非结构化数据采集的特点是什么? 3.请阐述传统的数据采集与大数据采集的区别? ​​​​​​​ ​​​​​​​4.大数据采集的数据源有哪些?针对不同的数据源,我们可以采用哪些不同的方法和工具? 数据

    2024年01月25日
    浏览(52)
  • 昇腾CANN DVPP硬件加速训练数据预处理,友好解决Host CPU预处理瓶

    本文分享自华为云社区《昇腾CANN 7.0 黑科技:DVPP硬件加速训练数据预处理,友好解决Host CPU预处理瓶颈》,作者: 昇腾CANN 。 随着人工智能的快速发展,越来越多的应用场景需要使用机器学习和深度学习模型。AI网络模型的训练一般分成两个关键部分,一个是训练数据预处理

    2024年02月05日
    浏览(49)
  • python数据预处理

    输出结果如下: 观察可知,【销量】存在一个缺失值,本例将缺失值所在行进行删除处理 输出结果如下: 输出结果如下: 观察可知,箱线图上下边缘存在异常值,本例通过四分位法对异常值进行处理,即:超出上边缘的异常值让其落在上边缘,低于下边缘的异常值让其落在

    2024年02月13日
    浏览(41)
  • 编译预处理:#if

    #if expression … #elif … #end expression 是整数常量比较的表达式,例如: defined表达式,例如 defined AAA, 或者 defined(AAA), 如果AAA是一个宏定义,return true,否则,return false; 单个整数,例如:1/10/100/0, 非零为true,零为false; 整数比较,例如:1 == 1为true, 0 == 0为ture, 1 2为false; 单个

    2023年04月14日
    浏览(70)
  • 【C语言】预处理

    在ANSI C的任何一种实现中,存在两个不同的环境。 第1种是翻译环境,在这个环境中源代码被转换为可执行的机器指令。 第2种是执行环境,它用于实际执行代码。 1.翻译环境 组成一个程序的每个源文件通过编译过程分别转换成目标代码 每个目标文件由链接器(linker)捆绑在

    2024年02月17日
    浏览(67)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包