element ui中的scss语法理解

🕗 发布于 2024-07-04 18:31 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

原文地址：https://blog.csdn.net/song854601134/article/details/140098888

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：vue---基本原理（二）
下一篇：【java高级】【算法】通过子节点反向获取树路径父节点且不获取无关节点

设计模式之装饰器模式(SSO单点登录功能扩展，增加拦截用户访问方法范围场景)
不改变原有类，可能有的小伙伴会想到继承、AOP切面，当然这些方式都可以实现，但是使用装饰器模式会是另外一种思路更为灵活，可以避免继承导致的子类过多，也可以避免AOP带来的复杂性。就像夏天热你穿短裤，冬
阅读更多2024-11-15
MySQL45讲第二十三讲是怎么保证数据不丢的？
在 MySQL 的世界里，数据的可靠性是至关重要的。今天，我们将深入探讨 MySQL 是如何保证数据不丢的，这涉及到 binlog 和 redo log 的写入机制，以及一些关键参数的设置。
阅读更多2024-11-15
【Electron】Electron Forge如何支持Element plus？
在 Electron Forge 项目中集成 Element Plus 是一个相对直接的过程。Element Plus 是一个基于 Vue 3 的 UI 组件库，因此你需要确保你的 Electron
阅读更多2024-11-15
jupyter可视化pandas dataframe
在Jupyter中显示HTML表格。
阅读更多2024-11-15
如何使用Jupyter
Jupyter Notebook 是一个开源的 Web 应用程序，允许你创建和共享包含实时代码、方程、可视化和解释性文本的文档。Jupyter Notebook 还支持许多高级功能，如魔法命令、扩展、
阅读更多2024-11-15
利用飞书多维表格自动发布版本
飞书的多维表格有自动化的能力，我们每周只需要设定好版本发布的时间，可以让其自动触发版本发布，并在群里通知所有人。那么假定我们每隔10分钟获取一次，除非在发版前10分钟内修改发版计划，否则都能感知到版本
阅读更多2024-11-15
SQL Server Service Broker完整示例
SQL server Service Broker实战
阅读更多2024-11-15
QT鼠标事件
这篇文章介绍如何使用事件和获取事件的信号。
阅读更多2024-11-15
基于Python+Vue开发的旅游景区管理系统
该项目是基于Python+Vue开发的旅游景区管理系统（前后端分离），这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Python编程技能，同时锻炼他们的项目设计与开发能力。通
阅读更多2024-11-15
2023年12月中国电子学会青少年软件编程（Python）等级考试试卷（三级）答案 + 解析
2023年12月中国电子学会青少年软件编程（Python）等级考试试卷（三级）答案 + 解析
阅读更多2024-11-15

element ui中的scss语法理解

导读

bem方法解析

相关文章