Cacher is the code snippet organizer for pro developers

@mixin sub_class(
  $type: element,
  $class_name: null
) {
  @if $type == element {
    &__#{$class_name} {
      @content
    }
  }

  @if $type == modifier {
    &--#{$class_name} {
      @content
    }
  }
}

// Usage:
@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();
}

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