Cacher is the code snippet organizer for pro developers

/*
A slightly more automated approach to BEM modifier classes:
using '&' parent selector interpolation, modifiers extend their bases,
so that HTML markup requires only the modifier class not the base *and* modifier
*/
/* 
Example: the .button here in HTML 
would only require its modifier class, not both base and modifier
e.g. class="button--good" not class="button button--good"
*/
.button, .button--good, .button--bad {
  padding: 0.5em;
  border-radius: 0.25em;
}
.button--good {
  background-color: green;
}
.button--bad {
  background-color: red;
}
.button__icon, .button__icon--good, .button__icon--bad {
  margin-left: 1em;
}
.button__icon--good {
  color: green;
}
.button__icon--bad {
  color: red;
}

/* 
Also: due to mechanics of '@extend', other appearances of the base class 
will output all the modifiers, regardless of source-order
--normally something that annoys me but in this case an advantage
*/
.some-context .button, .some-context .button--good, .some-context .button--bad {
  height: 100px;
}

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

/*
A slightly more automated approach to BEM modifier classes:
using '&' parent selector interpolation, modifiers extend their bases,
so that HTML markup requires only the modifier class not the base *and* modifier
*/

// the BEM modifier() mixin
@mixin modifier($name) {
  @at-root {
    // '&' is a double-wrapped list
    $selector: nth(&, 1);
    // direct parent will be the last item in that list
    $direct-parent: nth($selector, length($selector));
    // modifier should have all properties of parent
    #{$direct-parent}--#{$name} { @extend #{$direct-parent}; }
    // '@content' will be in a nested selector however, if that is the context
    #{&}--#{$name} { @content; }
  }
}

// a BEM element() mixin--as has been seen elsewhere
@mixin element($name) {
  @at-root {
    #{&}__#{$name} {
      @content;
    }
  }
}

/* 
Example: the .button here in HTML 
would only require its modifier class, not both base and modifier
e.g. class="button--good" not class="button button--good"
*/

.button {
  padding: 0.5em;
  border-radius: 0.25em;
  @include modifier('good') {
    background-color: green;
  }
  @include modifier('bad') {
    background-color: red;
  }
  @include element('icon') {
    margin-left: 1em;
    @include modifier('good') {
      color: green;
    }
    @include modifier('bad') {
      color: red;
    }
  }
}

/* 
Also: due to mechanics of '@extend', other appearances of the base class 
will output all the modifiers, regardless of source-order
--normally something that annoys me but in this case an advantage
*/

.some-context {
  .button {
    height: 100px;
  }
}