elementui樣式庫分析——alert

我以elementui中alert組件爲例展開。el用的是sass預編譯器，具體語法在https://www.sasscss.com中查詢。

目錄結構分析

 

 

 主要用到這兩個。BEM是啥？是一個命名規範，具體看這裏 https://zhuanlan.zhihu.com/p/33188830。

好了，主要說一下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; }