codingdesigner · November 1, 2013 21:53
diff --git a/SassMeister-input-HTML.html b/SassMeister-input-HTML.html
 <div class="foo">
    <h2>Hello World</h2>
 </div>
diff --git a/SassMeister-input.scss b/SassMeister-input.scss
 // ----
 // Sass (v3.3.0.rc.1)
 // Compass (v0.13.alpha.10)
 // ----

 @mixin bem-el($name) {
    @at-root #{&}__#{$name} {
        @content;
    }
 }

 @mixin bem-mod($name) {
    @at-root #{&}--#{$name} {
        @content;
    }
 }

 .foo {
    content: green;
    
    @include bem-el(bar) {
        content: red;
        
        @include bem-mod(baz) {
            content: blue;
        }
    }
 }
diff --git a/SassMeister-output.css b/SassMeister-output.css
 .foo {
  content: green;
 }
 .foo__bar {
  content: red;
 }
 .foo__bar--baz {
  content: blue;
 }
diff --git a/SassMeister-rendered.html b/SassMeister-rendered.html
 <div class="foo">
    <h2>Hello World</h2>
 </div>