Generated by SassMeister.com.

SassMeister-input.sass

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

// Based on BEM helper mixins by @lunelson (http://sassmeister.com/gist/7786284)
// Altered to use Sass and the EnvatoCSS syntax (http://webuild.envato.com/blog/how-to-scale-and-maintain-legacy-css-with-sass-and-smacss/)


=modifier($name)
  @at-root
    $selector: nth(&, 1)
    $direct-parent: nth($selector, length($selector))
    #{$direct-parent}--#{$name}
      @extend #{$direct-parent}
    #{&}--#{$name}
      @content

=child($name)
  @at-root
    #{&}__#{$name}
      @content


.button
  padding: 0.5em
  border-radius: 0.25em
  
  +modifier('good')
    background-color: green

  +modifier('bad')
    background-color: red

  +child('icon')
    margin-left: 1em

    +modifier('good')
      color: green

    +modifier('bad')
      color: red

SassMeister-output.css

.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;
}