The Block, Element, Modifier methodology (commonly referred to as BEM) is a popular naming convention for classes in HTML and CSS. Developed by the team at Yandex, its goal is to help developers better understand the relationship between the HTML and CSS in a given project.

BEM.scss

@mixin e($elements...) {
  $selector: ();

  @each $element in $elements {
    $selector: append($selector, unquote("&__" + $element), comma);
  }

  #{$selector} {
    @content;
  }
}

@mixin m($modifiers...) {
  $selector: ();

  @each $modifier in $modifiers {
    $selector: append($selector, unquote("&--" + $modifier), comma);
  }

  #{$selector} {
    @content;
  }
}

.block {
  @include e(child) {
    background: teal;

    @include m(featured, important) {
      background: crimson;
    }
  }
}

output:
.block__child {background: teal;}
.block__child--featured, .block__child--important {background: crimson;}