在實(shí)際項(xiàng)目開(kāi)發(fā)中，為了統(tǒng)一樣式書(shū)寫(xiě)規(guī)范，通常是遵循BEM規(guī)范，結(jié)合Less/Sass使用，可以封裝成函數(shù)：

• 封裝

$elementSeparator: "__";
$modifierSeparator: "--"; 
@mixin b($block) { 
    .#{$block} { 
        @content; 
    } 
} 
@mixin e($element) { 
    @at-root { 
        #{&}#{$elementSeparator + $element} { 
            @content; 
        } 
    } 
}
@mixin m($modifier) { 
     @at-root { 
        #{&}#{$modifierSeparator + $modifier} { 
             @content; 
        } 
    } 
}

• 使用

<div class="el-button">
  <div class="el-button__btn">
    <button class="el-button__btn--primary">確定</button>
  </div>
</div>

@include b(el-button) {
  display:'inline-block';
  @include e(btn) {
    height:30px
    @include m(primary) {
      color:#ee6666
    }
  }
}