bem函数

$name-space: 'study-7bem';  // 例如element的类名中都有el

$block-sel: '-';  // 例如el-中的-

$element-sel: '———'; //例如element中对元素添加类名的时候使用的是———

$modfier-sle: '--'; //例如elemeent中对元素状态添加类名的时候使用的是--，如button的succeed状态

// .study-7bem-test {}

@mixin b($block) {

  $b: #{$name-space + $block-sel + $block}; // 例如给组件添加el-前缀

  .#{$b} {

    @content; // 可以理解为占位符，即该类本来的样式

  }

}

// .study-7bem-test__element {}

@mixin e($element) {

  $seletor: &; // 取父类的选择器名,即study-7bem-test

  $e: #{$seletor + $element-sel + $element}; // 例如给组件中的元素添加el-XX__前缀

  @at-root { // 避免多层嵌套一层父级类目，否则生成的类名会是.study-7bem-test .study-7bem-test__element{}

    .#{$e} {

      @content;

    }

  }

}

@mixin m($modifier) {

  $seletor: &;

  $m: #{$seletor + $modfier-sle + $modifier}; // 例如给组件中的元素添加el-XX__elment--前缀

  @at-root {

    .#{$m} {

      @content;

    }

  }

}