Generated by SassMeister.com.

SassMeister-input-HTML.haml

/ person listing page
%div#person-list
  %div.person
    default

  %div.person.person--active
    active

  %div.person.person--pending
    pending

/ person show page
%div#person-show
  %div.person
    %div.first-name Anonymous
    %div.last-name Person
  %div.person.person--admin
    %div.first-name Michael
    %div.last-name Chan
    
/ test @at-root
%div#block-wrapper
  %div.block
    test block
    
    %div.block__element
      test element
    
  %div.block.block--modifier
    test modifier

SassMeister-input.sass

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

@mixin object($name)
  .#{$name}
    color: blue
  
    @at-root #{&}__li
      color: black
    
    @at-root #{&}--active
      color: green
      
    @content
    
+object('person')
  @at-root #{&}--error
    color: red

SassMeister-output.css

.person {
  color: blue;
}
.person__li {
  color: black;
}
.person--active {
  color: green;
}
.person--error {
  color: red;
}

SassMeister-rendered.html

<!-- person listing page -->
<div id='person-list'>
  <div class='person'>
    default
  </div>
  <div class='person person--active'>
    active
  </div>
  <div class='person person--pending'>
    pending
  </div>
</div>
<!-- person show page -->
<div id='person-show'>
  <div class='person'>
    <div class='first-name'>Anonymous</div>
    <div class='last-name'>Person</div>
  </div>
  <div class='person person--admin'>
    <div class='first-name'>Michael</div>
    <div class='last-name'>Chan</div>
  </div>
</div>
<!-- test @at-root -->
<div id='block-wrapper'>
  <div class='block'>
    test block
    <div class='block__element'>
      test element
    </div>
  </div>
  <div class='block block--modifier'>
    test modifier
  </div>
</div>