Generated by SassMeister.com.

SassMeister-input-HTML.haml

#foo
  .a
    .b
      .c.placed
#bar
  .a
    .b
      .c.a__c.b__c.placed

SassMeister-input.scss

// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----

.a, .b, .c {
  padding: 20px;
}

.c {
  height: 200px;
}

.a {
  background: #666;
}

.b {
  background: #777;
}

.c {
  background: #888;
}

// Placements
// http://specificity.keegan.st/
// http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

// With .placed class

#foo .c.placed { // Specificity: 120
  background: red;
}

.a .c.placed { // Specificity: 30
  background: green;
}

.a .b .c.placed { // Specificity: 40
  background: green;
}

.b .c.placed { // Specificity: 30
  background: blue;
}

#foo .a .b .c.placed { // Specificity: 140
  background: green;
}

// With element syntax

#bar .c.placed { // Specificity: 120
  background: red;
}

.a__c {
  background: green; // Specificity: 10
}

.a__c.b__c {
  background: green; // Specificity: 20
}

.b__c {
  background: blue; // Specificity: 10
}

#bar .a__c.b__c {
  background: green; // Specificity: 120
}

SassMeister-output.css

.a, .b, .c {
  padding: 20px;
}

.c {
  height: 200px;
}

.a {
  background: #666;
}

.b {
  background: #777;
}

.c {
  background: #888;
}

#foo .c.placed {
  background: red;
}

.a .c.placed {
  background: green;
}

.a .b .c.placed {
  background: green;
}

.b .c.placed {
  background: blue;
}

#foo .a .b .c.placed {
  background: green;
}

#bar .c.placed {
  background: red;
}

.a__c {
  background: green;
}

.a__c.b__c {
  background: green;
}

.b__c {
  background: blue;
}

#bar .a__c.b__c {
  background: green;
}

SassMeister-rendered.html

<div id='foo'>
  <div class='a'>
    <div class='b'>
      <div class='c placed'></div>
    </div>
  </div>
</div>
<div id='bar'>
  <div class='a'>
    <div class='b'>
      <div class='c a__c b__c placed'></div>
    </div>
  </div>
</div>