Vocabulary mixins (for BEM and namespacing) as refernce to this post using the same approach for .sass file (https://codepen.io/andersschmidt/post/expressive-bem-with-sass-a-different-approach)

mixins.css

/* MIXINS */
.media-object {
  /**/ }
  .media-object__image {
    /**/ }
    .media-object__image--reversed {
      /**/ }
  .media-object__body {
    /**/ }
.person {
  /**/ }
  .person__hand {
    /**/ }
    .person__hand--left {
      /**/ }
    .person__hand--right {
      /**/ }
    .person__hand.is-open {
      /**/ }
    .person__hand.holds-ring {
      /**/ }
  .person--female {
    /**/ }
    .person--female__hand {
      /**/ }
.puppet {
  /**/ }
  .puppet__head {
    /**/ }
  .puppet__face {
    /**/ }
  .puppet__arm {
    /**/ }
    .puppet__arm--left {
      /**/ }
    .puppet__arm--right {
      /**/ }
  .puppet__leg {
    /**/ }
    .puppet__leg--left {
      /**/ }
    .puppet__leg--right {
      /**/ }
    .puppet__leg--wooden {
      /**/ }
  .puppet__foot {
    /**/ }
.menu-component {
  /**/ }
  .menu-component__item {
    /**/ }
    .menu-component__item--active {
      /**/ }
    .menu-component__item.holds-dropdown {
      /**/ }
.modal-component {
  /**/ }
  .modal-component__title {
    /**/ }
  .modal-component--gallery {
    /**/ }
  .modal-component.is-open {
    /**/ }

/*# sourceMappingURL=mixins.css.map */

mixins.scss

/* MIXINS */
// --------------------------------------------------
// Vocabulary mixins (for BEM and namespacing)
//---------------------------------------------------
@mixin new($name, $type: null) { // BEM Block
  @at-root
  {
    @if ($type != null) {
      .#{$name}-#{$type} {
        /**/
        @content
      }
    } @else {
      .#{$name} {
        /**/
        @content
      }
    }
  }
}

@mixin has($element) { // BEM Element
  @at-root {
    &__#{$element} {
      /**/
      @content;
    }
  }
}

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

@mixin if-its($state) {
  &.is-#{$state} {
    /**/
    @content
  }
}

@mixin holds($state) {
  &.holds-#{$state} {
    /**/
    @content
  }
}


// import 'expressive mixins' from /andersschmidt/pen/MYZqar
//
// Example A: The classic media object
 @include new('media', 'object') {
  @include has('image') {
    @include when('reversed')
  }
  @include has('body')
}

// Example B: The person OOP example from CSS Wizardry
@include new('person') {
  @include has('hand') {
    @include when('left');
    @include when('right');
    @include if-its('open');
    @include holds('ring')
  }
  @include when('female') {
    @include has('hand')
  }
}

// Example C: The puppet, using more classic OOP,
// thanks to @zerratar for an awesome way of explaining OOP
// in terms of puppets and puppetmasters
@include new('puppet') {
  @include has('head');
  @include has('face');
  @include has('arm') {
    @include when('left');
    @include when('right')
  }
  @include has('leg') {
    @include when('left');
    @include when('right');
    @include when('wooden')
  }
  @include has('foot')
}

// Example D: Menu with menu items that can have a dropdown
@include new('menu', 'component') {
  @include has('item') {
    @include when('active');
    @include holds('dropdown')
  }
}

// Example E: Modal with title, gallery modifier and open state
@include new('modal', 'component') {
  @include has('title');
  @include when('gallery');
  @include if-its('open'); // translates to is-open
}