scss 通过mixin生成BEM类名

Posted 2021-05-18

.foo {
  background-color: red;
}
.foo__outer {
  background-color: blue;
}
.foo--inner {
  background-color: green;
}
.foo:hover {
  background-color: yellow;
}

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

@mixin sub_class(
  $type: element,
  $class_name: null
) {
  @if $type == element {
    &__#{$class_name} {
      @content
    }  
  }
  @if $type == modifier {
    &--#{$class_name} {
      @content
    }  
  }
}
@mixin grid_item(
  $height: 56%
) {
  background-color: red;

  @include sub_class(element, outer) {
    background-color: blue;
  }

  @include sub_class(modifier, inner) {
    background-color: green;
  }

  &:hover {
    background-color: yellow;
  }
}

.foo {
  @include grid_item();
}