The following are a couple of Sass mixins for BEM (block, element, modifier) front-end naming methodology.

BEM Sass Mixins

The Sass mixin for BEM element is:

// BEM Element
@mixin element($element) {
    &__#{$element} {
        @content;
    }
}

The Sass mixin for BEM modifier is:

// BEM Modifier
@mixin modifier($modifier) {
    &--#{$modifier} {
        @content;
    }
}

BEM Sass Mixins Usage

Here is how you would use the BEM Sass mixins:

.block {
  /* Add .block CSS here */

    @include element('element-name') {
      /* Element CSS goes here */
    }

    @include modifier('modifier-name') {
          /* Modifier CSS goes here */

        @include element('element-name') {
            /* Element of Modifier CSS goes here */
        }
    }

}

Where element-name and modifier-name is the name of the element and modifier.

As you can see, the block wraps around everything. The element and modifier of the block goes inside the block CSS class. If there is an element of the modifier, the element would go inside the modifier.