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

// person.sass
%person
  background: #ddd
  
  &.person--admin
    padding: 20px
    color: white
    background: red
  .first-name
    font-weight: bold
    
  .last-name
    font-style: italic

%person-list-item
  display: block
  width: 200px
  height: 30px
  background: grey
  text-align: center
  color: white
  line-height: 30px

  &.person--active
    background: blue

  .person--name
    color: white
    text-align: center


// person.show.sass
#person-list
  .person
    @extend %person-list-item

    &.person--pending
      background: yellow
      color: grey

#person-show
  .person
    @extend %person
    
    .first-name
      color: pink
      font-weight: normal


#block-wrapper
  .block
    color: blue
  
    .block__element
      color: red
    
    &.block--modifier
      color: orange

SassMeister-output.css

#person-show .person {
  background: #dddddd;
}
#person-show .person--admin.person {
  padding: 20px;
  color: white;
  background: red;
}
#person-show .person .first-name {
  font-weight: bold;
}
#person-show .person .last-name {
  font-style: italic;
}

#person-list .person {
  display: block;
  width: 200px;
  height: 30px;
  background: grey;
  text-align: center;
  color: white;
  line-height: 30px;
}
#person-list .person--active.person {
  background: blue;
}
#person-list .person .person--name {
  color: white;
  text-align: center;
}

#person-list .person.person--pending {
  background: yellow;
  color: grey;
}

#person-show .person .first-name {
  color: pink;
  font-weight: normal;
}

#block-wrapper .block {
  color: blue;
}
#block-wrapper .block .block__element {
  color: red;
}
#block-wrapper .block.block--modifier {
  color: orange;
}

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>