Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.0.rc.1)
// ----

.note {
  color: #ffffff;

  &__content {
    background: white;
  }

  &__meta {
    background: #f1f1f1;
    border-top: 1px solid #eee;
  }

  &--featured {
  box-shadow: 0 3px 1px rgba(0, 0, 0, 0.1);
  }

}



//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

.note {
  color: #ffffff;
}
.note__content {
  background: white;
}
.note__meta {
  background: #f1f1f1;
  border-top: 1px solid #eee;
}
.note--featured {
  box-shadow: 0 3px 1px rgba(0, 0, 0, 0.1);
}

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