Example of

bem-example.scss

// This gist is to highlight a possible convience mixin to BEM practices.
// Note: Below mixins "p,c,m" do not directly adhere to the current atomic nomenclature or file structure.
// However, these example mixins could be prefixed/suffixed any which way to follow our nomenclature.
/** bem-mixins  **/

@mixin p($parent-selector) { 
  .#{$parent-selector} {
    @content;
  }
}

@mixin c($child-selector) {
  &__#{$child-selector} {
    @content;
  }
}

@mixin m($selector-modifier) {
  &--#{$selector-modifier} {
    @content;
  }
}


/** bem-mixin usage **/

@include p('master-list') {
  position: relative;
  
  @include m('hide') {
    display: none;
  }

  @include c('item') {
    position: absolute;

    @include m('active') {
      color: red;
    }
  }
}

/** bem mixin compiled output **/

//   .master-list { position: relative; }
//   .master-list--hide { display: none; }
//   .master-list__item { position: absolute;}
//   .master-list__item--active { color: red; }