Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// ----

/* 3 ways to do modules with BEM syntax in sass */

/* 3 mixins */
$module: "";
$space: "  ";

@mixin c($name) { //Component
$parent-module: $module;
$module: $name;
  @at-root .#{$module} {
    @content;
  }
$module: $parent-module;
}

@mixin component-part($name,$part-sep){
@if $module == "" {
  @warn Not inside module;
  error: modifier not inside component;
} @else {
$parent-module: $module;
$module: #{$module}#{$part-sep}#{$name};
  @at-root .#{$module} {
    @content;
  }
$module: $parent-module;
}
}

@mixin m($name){  //Modifier
  @include component-part($name, "--"){
    @content;
  }
}
@mixin s($name){  //sub component
  @include component-part($name, "__"){
    @content;
  }
}


@include c("media"){
  display: block;
  @include m("alert") {
    background-color: pink;
  }
  @include s("text") {
    float: right;
    @include m("feature") {
      background-color: orange;
    }
  }
  @include s("image") {
    float: left;
  }
}

/***************************************************************************/
/* one mixin */
// http://mikefowler.me/2013/10/17/support-for-bem-modules-sass-3.3/
@mixin module($name) {.#{$name} {@at-root {@content;}}}

@include module('note') {
  & {
    display: block;
  }    &__content {
      background: white;
    }    &__meta {
      background: #f1f1f1;
      border-top: 1px solid #eee;
    }    &--featured {
      &__meta {
        background: pink;
      }
    } 
}
/***************************************************************************/
/* Pure SASS */

%partial-foobar {
  foobar: foo;
}

div {
  intermediate: "appears between partial declaration and first use";
}

.BOAT {
  & {
    @extend %partial-foobar;
    display: block;
  } &__content {
      background: white;
    }
    &__meta {
      background: #f1f1f1;
      border-top: 1px solid #eee;
    }
    &--featured {
      &__meta {
        background: pink;
      }
    } 
}

SassMeister-output.css

/* 3 ways to do modules with BEM syntax in sass */
/* 3 mixins */
.media {
  display: block;
}
.media--alert {
  background-color: pink;
}
.media__text {
  float: right;
}
.media__text--feature {
  background-color: orange;
}
.media__image {
  float: left;
}
/***************************************************************************/
/* one mixin */
.note {
  display: block;
}

.note__content {
  background: white;
}

.note__meta {
  background: #f1f1f1;
  border-top: 1px solid #eee;
}

.note--featured__meta {
  background: pink;
}

/***************************************************************************/
/* Pure SASS */
.BOAT {
  foobar: foo;
}

div {
  intermediate: "appears between partial declaration and first use";
}

.BOAT {
  display: block;
}
.BOAT__content {
  background: white;
}
.BOAT__meta {
  background: #f1f1f1;
  border-top: 1px solid #eee;
}
.BOAT--featured__meta {
  background: pink;
}