Improved BEM Mixins

README.markdown

I've previously used a mixin format for creating BEM-based selectors that would allow me to do something like this:

.block {
  @include e(element) {
    @include m(modifier) {...}
  }
}

This worked for me until there were instances when I needed multiple elements with similar attributes and didn't want to go through the process of creating a placeholder class to @extend.

This new style would allow for creating multiple elements or modifiers from the same declaration.

.article { 
  @include e(title, description) {
    font-size: 1.5em;
    margin-bottom: 0;
    margin-top: 0;
  }
  ...
}

Creates:

.article--title, .article--description {
  font-size: 1.5em;
  margin-bottom: 0;
  margin-top: 0;
}

bem.scss

@mixin e($elements...) {
  $element-list: ();
  @each $element in $elements {
    $element-list: append($element-list, "&__#{$element}", comma)
  }
  #{$element-list} {
    @content;
  }
}

@mixin m($modifiers...) {
  $modifier-list: ();
  @each $modifier in $modifiers {
    $modifier-list: append($modifier-list, "&--#{$modifier}", comma)
  }
  #{$modifier-list} {
    @content;
  }
}