#BEM #SCSS #SASSMixin

_bem.scss

$element-separator: '__';
$modifier-separator: '--';
$when-separator: '.is-';
$component: 'el' !default;
$component-separator: '-';

//bem
@function bem($b, $e: null, $m: null, $c: $component) {
  $block: $c + $component-separator + $b;
  $element: '';
  $modifier: '';
  @if $e {
    $element: $element-separator + $e;
  }
  @if $m {
    $modifier: $modifier-separator + $m;
  }

  @return #{$block+$element+$modifier};
}

//是否是modifier
@function containsModifier($selector) {
  $selector: selectorToString($selector);

  @if str-index($selector, $modifier-separator) {
    @return true;
  } @else {
    @return false;
  }
}

//是否是when
@function containsWhen($selector) {
  $selector: selectorToString($selector);

  @if str-index($selector, $when-separator) {
    @return true;
  } @else {
    @return false;
  }
}

@function selectorToString($selector) {
  $selector: inspect($selector); //cast to string
  $selector: str-slice($selector, 2, -2);//remove brackets

  @return $selector;
}

@function getBlock($selector) {
  $selector: selectorToString($selector);
  $modifierStart: str-index($selector, $modifier-separator) - 1;

  @return str-slice($selector, 0, $modifierStart);
}

@function getWhenBlock($selector) {
  $selector: selectorToString($selector);
  $whenStart: str-index($selector, $when-separator) - 1;

  @return str-slice($selector, 0, $whenStart);
}

@function getModifierBlock($selector) {
  $selector: selectorToString($selector);

  @return str-slice($selector, 0, str_length($selector)-1);
}

@function b($block, $c: $component) {
  @return #{'.' + $c + $component-separator + $block};
}

@function e($element) {
  $selector: &;

  @if containsModifier($selector) {
    $block: getBlock($selector);

    @return #{$block+$element-separator+$element};
  }

  @else if containsWhen($selector) {
    $block: getWhenBlock($selector);

    @return #{$block+$element-separator+$element};
  } @else {
    @return #{$selector+$element-separator+$element};
  }
}

@function m($modifier) {
  $selector: getModifierBlock(&);

  @if containsModifier($selector) {
    $block: getBlock($selector);

    @return #{$selector}#{'.'}#{$block+$modifier-separator+$modifier};
  }

  @return  #{$selector}#{$modifier-separator+$modifier};
}

// 新增 shade 方法
@function shade($color, $percent) {
  @return mix(#000, $color, $percent);
}

// 新增 tint 方法
@function tint($color, $percent) {
  @return mix(#fff, $color, $percent);
}

@mixin b($block, $c: $component) {
  .#{$c + $component-separator + $block} {
    @content;
  }
}

@mixin e($elements...) {
  @each $element in $elements {
    $selector: &;

    @if containsModifier($selector) {
      $block: getBlock($selector);

      @at-root {
        #{$selector} {
          #{$block+$element-separator+$element} {
            @content;
          }
        }
      }
    }

    @else if containsWhen($selector) {
      $block: getWhenBlock($selector);

      @at-root {
        #{$selector} {
          #{$block+$element-separator+$element} {
            @content;
          }
        }
      }
    } @else {
      @at-root {
        #{$selector+$element-separator+$element} {
          @content;
        }
      }
    }
  }
}

@mixin m($modifiers...) {
  @each $modifier in $modifiers {
    @at-root {
      $selector: &;

      @if containsModifier($selector) {
        $block: getBlock($selector);

        #{$selector}#{$block+$modifier-separator+$modifier} {
          @content;
        }
      }

      #{$selector}#{$modifier-separator+$modifier} {
        @content;
      }
    }
  }
}

@mixin when($states...) {
  @each $state in $states {
    &.is-#{$state} {
      @content;
    }
  }
}