element ui中的scss语法理解

摘录至

导读

首先来看一个bem命名示例

.el-message-box{}
.el-message-box__header{}
.el-message-box__header--active{}

如果使用已经封装好的bem方法的话,那么可以写成

@include b('message-box') {@include e('header') {@include m('active');}
}

接下来我们来看一下bem方法是如何实现的

bem方法解析

首先我们找到style/mixins/config.scss文件,里面定义了如下几个变量

$namespace: 'el';
$element-separator: '__';
$modifier-separator: '--';
$state-prefix: 'is-';

然后我们再找到style/mixins/config.scss文件,找到b,e,m方法

/* BEM-------------------------- */
@mixin b($block) {$B: $namespace+'-'+$block !global;.#{$B} {@content;}
}
@mixin e($element) {$E: $element !global;$selector: &;$currentSelector: "";@each $unit in $element {$currentSelector: #{$currentSelector + "." + $B + $element-separator + $unit + ","};}@if hitAllSpecialNestRule($selector) {@at-root {#{$selector} {#{$currentSelector} {@content;}}}} @else {@at-root {#{$currentSelector} {@content;}}}
}
@mixin m($modifier) {$selector: &;$currentSelector: "";@each $unit in $modifier {$currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","};}@at-root {#{$currentSelector} {@content;}}
}

代码量不多,逻辑也不复杂,但是语法有点晦涩难懂,接下来我们一个一个解释
+ !global 变量提升,将局部变量提升为全局变量,在其他函数体内也能访问到此变量
+ @at-root将父级选择器直接暴力的改成根选择器

.header{@at-root {.content{color:red}}
}

编译为

.header{}
.content{color:red}

+ #{}插值,可以通过 #{} 插值语法在选择器和属性名中使用 SassScript 变量

$name: foo;
$attr: border;
p.#{$name} {#{$attr}-color: blue;
}

编译为

p.foo {border-color: blue;
}

在大多数情况下,这种做可能还不如使用直接变量来的方便,但使用 #{}意味着靠近它的运算符都将被视为纯CSS

p {$font-size: 12px;$line-height: 30px;font: #{$font-size}/#{$line-height};
}

编译为

p.foo {font:12px/30px;
}

现在我们在重新看一下b方法,定义了一个全局变量,拼接了一下字符串,逻辑很简单,e方法稍微复杂点,调用了一个hitAllSpecialNestRule方法(判断父级选择器是否包含'--','is',':'),hitAllSpecialNestRule定义在style/mixins/function文件中,代码如下:

@import 'config';
/* BEM support Func-------------------------- */
// inspect Returns a string representation of $value
//@debug inspect("Helvetica"); unquote('"Helvetica"')
@function selectorToString($selector) {$selector: inspect($selector);$selector: str-slice($selector, 2, -2);@return $selector;
}
// 判断选择器(.el-button__body--active) 是否包含 '--'
@function containsModifier($selector) {$selector: selectorToString($selector);@if str-index($selector, $modifier-separator) {@return true;} @else {@return false;}
}
// 判断选择器(.el-button__body.is-active) 是否包含 'is'
@function containWhenFlag($selector) {$selector: selectorToString($selector);@if str-index($selector, '.' + $state-prefix) {@return true;} @else {@return false;}
}
//  判断选择器(.el-button__body:before) 是否包含伪元素(:hover)
@function containPseudoClass($selector) {$selector: selectorToString($selector);@if str-index($selector, ':') {@return true;} @else {@return false;}
}
// hit:命中 nest:嵌套
@function hitAllSpecialNestRule($selector) {@return containsModifier($selector) or containWhenFlag($selector) or containPseudoClass($selector);
}

inspect:以字符串的形式返回表达式

@debug meta.inspect(10px 20px 30px); // unquote("10px 20px 30px")
@debug meta.inspect(("width": 200px)); // unquote('("width": 200px)')
@debug meta.inspect(null); // unquote("null")
@debug meta.inspect("Helvetica"); // unquote('"Helvetica"')

Maps不能转换为纯CSS。作为变量的值或参数传递给CSS函数将会导致错误。使用inspect($value) 函数以产生输出字符串,这对于调试 maps 非常有用。
重新回到e方法中,也是先拼字符串,然后再判断父级class是否存在嵌套关系,然后输出结果。

.container {@include b('button') {width: 200px;height: 200px;@include e('body') {color: #ccc;}}
}
.container--fix {@include b('button') {width: 200px;height: 200px;@include e('body') {color: #ccc;}}
}

编译为

.container .el-button {width: 200px;height: 200px;
}
.el-button__body {color: #ccc;
}
.container--fix .el-button {width: 200px;height: 200px;
}
.container--fix .el-button .el-button__body {color: #ccc;
}

最后一个e方法,流程和b一致,区别在拼接currentSelector字符串时,使用了$父级选择器,还没有使用全局变量B+全局变量E来拼接,因为结构不一定是B-E-M,有可能是B-M。最后附上完整的编译结果

.container {@include b('button') {width: 200px;height: 200px;@include e('body') {color: #ccc;@include m('success');}}
}
.container--fix {@include b('button') {width: 200px;height: 200px;@include e('body') {color: #ccc;@include m('success');}}
}

编译为

.container .el-button {width: 200px;height: 200px;
}
.el-button__body {color: #ccc;
}
.container--fix .el-button {width: 200px;height: 200px;
}
.container--fix .el-button .el-button__body {color: #ccc;
}

scss完整代码如下,可以在scss在线编译
中编译调试

$namespace: 'el';
$element-separator: '__';
$modifier-separator: '--';
$state-prefix: 'is-';
@function selectorToString($selector) {$selector: inspect($selector);$selector: str-slice($selector, 2, -2);@return $selector;
}
// 判断选择器(.el-button__body--active) 是否包含 '--'
@function containsModifier($selector) {$selector: selectorToString($selector);@if str-index($selector, $modifier-separator) {@return true;} @else {@return false;}
}
// 判断选择器(.el-button__body.is-active) 是否包含 'is'
@function containWhenFlag($selector) {$selector: selectorToString($selector);@if str-index($selector, '.' + $state-prefix) {@return true;} @else {@return false;

发现有许多 sass 快速入门中没有提到过的语法: @if@else 等等,这里查阅具体文档列出其功能:

  • @if @else 这两者和任何编程语言的 if … else … 的用法是一样的,条件判断。if 中条件为 true 进入逻辑,否则使用 else 逻辑。
  • @at-root @at-root 指令导致一个或多个规则被限定输出在文档的根层级上,而不是被嵌套在其父选择器下。
  • @content 样式内容块可以传递到混入(mixin)包含样式的位置。样式内容块将出现在混入内的任何 @content 指令的位置。这使得可以定义抽象 关联到选择器和指令的解析。
  • @each in 类似js用法,遍历列表获取每个value值。
  • #{...} 是插值语法,用于在选择器和属性名中使用 SassScript 变量,所以 .#{$B} 表达式,如果 $B 的值为 hello-world,那么表达式结果等于 .hello-world

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/38868.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【FPGA】Verilog:全减器与半减器 | Full Subtractor | Half Subtractor

0x00 全减器(Full Subtractor) 减法器是用于减法运算的逻辑电路,与不包含借位的半减法器不同。 全减法器因为包含借位的产生与否,所以具备完整的减法功能。 输出由差 和借位 组成:

JUC基础学习

1.Java JUC简介 2.volatile关键字-内存可见性 3.原子变量-CAS算法 4.ConcurrentHashMap锁分段机制

什么是滴答定时器?

滴答定时器(Tick Timer)是一种关键的硬件组件,用于生成固定时间间隔的信号。这些信号通常称为“滴答”(tick),是操作系统和应用程序的时间管理基础。滴答定时器的应用范围广泛,从简单的定时任务…

Java中的数据加密与安全传输

Java中的数据加密与安全传输 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿!今天我们来探讨一下在Java中如何实现数据加密与安全传输。 随着互联网的普及和网络…

C++学习/复习18----迭代器/反向迭代器及在list/vector中的应用、list与vector模拟实现复习

迭代器是一个对象,可以循环访问 C 标准库容器中的元素,并提供对各个元素的访问。 C 标准库容器全都提供迭代器,以便算法可以采用标准方式访问其元素,而不必考虑用于存储元素的容器类型。 一、反向迭代器类 基于普通迭代器构建反…

使用gitlab的CI/CD实现logseq笔记自动发布为单页应用

使用gitlab的CI/CD实现logseq笔记自动发布为单页应用 使用gitlab的CI/CD实现logseq笔记自动发布为单页应用如何实现将logseq的笔记发布成网站使用 logseq-publish-docker 实现手动发布使用gitlab的CI/CD实现自动发布过程中的问题及解决参考资料 使用gitlab的CI/CD实现logseq笔记…

[AIGC] 常用的OLAP数据库:为数据分析提供强大的支持

导语:在大数据时代,数据分析成为了企业决策的重要依据。为了高效地处理和分析海量的数据,OLAP数据库应运而生。本文将介绍几种常用的OLAP数据库,为数据分析提供强大的支持。 一、Snowflake Snowflake是一种云原生的OLAP数据库&a…

win10和mac之间如何共享文件夹

我用的mac版本是 macOS Ventura ,其他版本的操作可能略有不同 在 macOS Ventura 上设置共享文件夹 打开“系统设置”:点击屏幕左上角的苹果菜单 () > 系统设置。选择“通用”:在左侧边栏中找到并点击“通用”。选择“共享”&#xff1…

第二届重庆国际渔业博览会

The 2th Chongqing International Fisheries & Seafood Expo 时间:2024年10月25-27日 地点:重庆国际博览中心 同期举办:第十六届中国(重庆)火锅美食文化节暨第九届中国(重庆)国际火锅产业博览会 展会规模: 展出…

利用Java的`java.util.concurrent`包优化多线程性能

利用Java的java.util.concurrent包优化多线程性能 一、引言 在Java的多线程编程中,性能优化是一个永恒的话题。随着多核CPU的普及和计算任务的日益复杂,多线程编程已经成为提高应用程序性能的重要手段。然而,多线程编程也带来了一系列的问题…

(论文版)深度学习 | 基于 VGG16-UNet 语义分割模型的猫狗图像提取研究

Hi,大家好,我是半亩花海。本实验本项目基于 VGG16-UNet 架构,利用 Labelme 标注数据和迁移学习,构建高效准确的猫狗图像分割模型。通过编码器-解码器结构(特征提取-上采样)提升分割精度,适应不同…

VBA数据库解决方案第十二讲:如何判断数据库中数据表是否存在

《VBA数据库解决方案》教程(版权10090845)是我推出的第二套教程,目前已经是第二版修订了。这套教程定位于中级,是学完字典后的另一个专题讲解。数据库是数据处理的利器,教程中详细介绍了利用ADO连接ACCDB和EXCEL的方法…

第11章 规划过程组(11.6规划进度管理)

第11章 规划过程组(二)11.6规划进度管理,在第三版教材第385页;#软考中级##中级系统集成项目管理师# 文字图片音频方式 第一个知识点:主要输出 1、进度管理计划 准确度 定义活动持续时间估算的可接受区间&#xff0…

第二周:计算机网络概述(下)

一、计算机网络性能指标(速率、带宽、延迟) 1、速率 2、带宽 3、延迟/时延 前面讲分组交换的时候介绍了,有一种延迟叫“传输延迟”,即发送一个报文,从第一个分组的发送,到最后一个分组的发送完成的这段时…

机器学习算法 —— 决策树

🌟欢迎来到 我的博客 —— 探索技术的无限可能! 🌟博客的简介(文章目录) 目录 背景描述数据说明数据来源决策树的介绍和应用决策树的介绍决策树的优点决策树的缺点决策树的应用实战演示导入模块训练模型数据和模型可视化(需要用到graphviz可视化库)模型预测基于pengui…

[Spring Boot]Rest服务调用远程Post请求

文章目录 pomconfig类业务类-Post方法调用 pom <dependency><groupId>org.apache.httpcomponents</groupId><artifactId>httpclient</artifactId><version>4.5.13</version> </dependency> <dependency><groupId>…

医疗AI革命,为何多模态大模型难以突破?

在人工智能的浪潮中&#xff0c;多模态大模型以其强大的数据处理能力和深度学习算法&#xff0c;被寄予厚望于医疗影像分析、辅助诊断等领域。然而&#xff0c;现实情况却远非如此乐观。本文将带您深入了解多模态大模型在医疗辅助诊断领域的潜力与局限&#xff0c;揭示其面临的…

ue5导航网格设置

AI使用导航网格进行移动&#xff0c;所以&#xff0c;先设置导航网格边界体积 2&#xff0c;使导航网格边界体积覆盖AI所需要的场景&#xff08;绿色区域&#xff09;&#xff0c;x,y&#xff0c;z在这里都扩大到原来的10倍 3&#xff0c;打开actor的“启用tick并开始” 4&…

PHP和phpSpider:如何应对网站反爬虫的JS挑战?

php和phpspider&#xff1a;如何应对网站反爬虫的js挑战&#xff1f; 随着互联网技术的发展&#xff0c;网站对于爬虫脚本的防御也越来越强大。网站常常通过使用Javascript技术来进行反爬虫&#xff0c;因为Javascript可以动态生成页面内容&#xff0c;使得简单的爬虫脚本很难…

MathType8.0最新官方免费版 功能强大的数学公式编辑器

MathType 是款功能强大的数学公式编辑器&#xff0c;可以让用户轻松地在各种文档中插入复杂的数学公式和符号。它支持手写输入公式&#xff0c;方便用户直接通过鼠标或触摸屏操作来创建公式。MathType 的符号丰富&#xff0c;几乎涵盖了所有数学、物理和化学等领域所需的符号。…