elementui样式库分析——alert

直⽩点 就是elementui的class命名规范。。⽬录结构分析

重点说⼀下mixins.scss 。var.scss可以理解成⼀个配置⽂件（颜⾊、字体⼤⼩、圆⾓⼤⼩之类的）。

mixins.scss 的任务是动态⽣成 “el-alert__... ” 这种格式的class

/* BEM

-------------------------- */

/** 插值

套⼀层class=\"el-..\"

在⼀个选择器内声明变量（如：$B、$E），嵌套在⾥⾯的其他选择器都可以访问到它*/

@mixin b($block) {

$B: $namespace+'-'+$block !global; .#{$B} { @content; }}

/** 插值

套⼀层class=\"el-title__...\" at-root:输出到根层级上*/

@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; } } }}/** 插值

套⼀层class=\"...__content\"*/

@mixin m($modifier) { $selector: &;

$currentSelector: \"\";

@each $unit in $modifier {

$currentSelector: #{$currentSelector + & + $modifier-separator + $unit + \ }

@at-root {

#{$currentSelector} { @content; } }}

alert.scss⽂件

/*

** m 代表修饰符，⽤来描述b(block) 如：blue,green */

@include m(blue){

background: $--color-success; }

@include m(green){

background: $--color-success; }

/*

** e 代表元素，b(block)中的元素，如：head,foot */

@include e(head){

background: $--color-white; }

/*------------编译后------------*/.el-alert--blue {

background: #67C23A; } .el-alert--green {

background: #67C23A; } .el-alert__head {

background: #FFFFFF; }