@Mixins to create BEM element & modifier classes

element-modifier-class.scss

/*------------------------------------*\
  * #element-modifier-class
  * BEM element & modifier classes
  * Using @at-root provides nesting declarations in Sass,
  * but compiles them to the stylesheet’s root.
\*------------------------------------*/

/**
 * @mixin element
 * Create a child element declaration
 * @param {String} $name - element name
 */

 @mixin element($name) {
   @at-root #{&}__#{$name} {
     @content;
   }
 }

 /**
  * @mixin modifier
  * Create a child element modifier declaration
  * @param {String} $name - modifier name
  */

 @mixin modifier($name) {
   @at-root #{&}--#{$name} {
     @content;
   }
 }

 .module {
   color: red;

   @include element(h3) {
     color: blue;

     @include modifier(success) {
       color: green;
     }
   }
 }
 
 
/*------------------------------------*
  * #element-modifier-class compiled
\*------------------------------------*/

.module {
  color: red;
}

.module__h3 {
  color: blue;
}

.module__h3--success {
  color: green;
}