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;
}
}
}
}
/**elementui登录界面
插值
套⼀层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; }