elementui style library analysis --alert

I elementui the alert component as an example to unfold. el sass with a pre-compiler, concrete syntax in https://www.sasscss.com query.

Directory Structure Analysis

 

 

 The two main uses. BEM is what? Is a naming convention, look here  https://zhuanlan.zhihu.com/p/33188830 .

Well, mainly talk about mixins.scss this. var.scss can be understood as a profile (color, font size, fillet size and the like).

The tasks are dynamically generated mixins.scss "el-alert __..." class of this format

/ * The BEM 
 -------------------------- * / 

/ ** 
  interpolation 
  sets one class = "el- .." 
  In one selector the variable declaration (such as: $ B, $ E), nested inside the other selectors can access to it 
* / 
@mixin B (Block $) { 
  $ B:! $ namespace + '-' + $ Block Global; 

  . # {B} {$ 
    @content; 
  } 
} 

/ ** 
  interpolation 
  sets one = class "EL-title __..." 
  AT-the root: the root level to the output 
* / 
@mixin E ($ Element) { 
  $ E : $ Element Global;! 
  $ Selector: &; 
  $ currentSelector: ""; 
  @each Unit in $ {$ Element 
    . currentSelector $: $ # {currentSelector + "" + $ B $ + $ + Separator Element 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;
    }
  }
}

  

Guess you like

Origin www.cnblogs.com/sunday123/p/11589395.html