SASS中使用BEM宏的小技巧

config.scss

$namespace:'z'; // 修饰命名空间
$state-prefix: 'is-';// 修饰状态
$modifier-separator:'--'; // 修饰类型的
$element-separator: '__'; // 划分空间分隔符

mixin.scss

@import "../common/var.scss";
// .z-button{}
@mixin b($block) {
    $B: $namespace+'-'+$block;
    .#{$B}{
        @content;
    }
}
// .z-button.is-xxx
@mixin when($state) {
    @at-root {
        &.#{$state-prefix + $state} {
            @content;
        }
    }
}
// &--primary => .z-button--primary
@mixin m($modifier) {
    @at-root {
        #{&+$modifier-separator+$modifier} {
            @content;
        }
    }
}
// &__header  => .z-button__header
@mixin e($element) {
    @at-root {
        #{&+$element-separator+$element} {
            @content;
        }
    }
}

实际用法:

@mixin button-variant($color, $background-color, $border-color) {
    color: $color;
    background: $background-color;
    border-color: $border-color;
}
@include b(button) {
    // BEM规范
    display: inline-block;
    cursor: pointer;
    @include when(disabled) { // 针对不同类型处理
        &,
        &:hover,
        &:focus {
            cursor: not-allowed
        }
    }
    @include when(round) {
        border-radius: 20px;
        padding: 12px 23px;
    }
    @include when(loading) {
        pointer-events: none;
    }
    @include m(primary) { //渲染不同类型的button
        @include button-variant($--color-white, $--color-primary, $--color-primary)
    }
    @include m(success) {
        @include button-variant($--color-white, $--color-success, $--color-success)
    }
    @include m(warning) {
        @include button-variant($--color-white, $--color-warning, $--color-warning)
    }
    @include m(danger) {
        @include button-variant($--color-white, $--color-danger, $--color-danger)
    }
    @include m(info) {
        @include button-variant($--color-white, $--color-info, $--color-info)
    }
}