Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----

//elements get appended with "__" and the $name
@mixin e($name) {
  @at-root   #{&}__#{$name} {
    @content;
  }
}

//modifiers get appended with "--" and the $name
@mixin m($name) {
  @at-root   #{&}--#{$name} {
    @content;
  }
}

.speech-bubble{
  color: purple;
   @include e(header){ //header element
    color: orange;
  }
   @include e(text){ //text element
    color: black;
     @include m(link){ //link modifier
      color: green;
    }
  }
}

SassMeister-output.css

.speech-bubble {
  color: purple;
}
.speech-bubble__header {
  color: orange;
}
.speech-bubble__text {
  color: black;
}
.speech-bubble__text--link {
  color: green;
}