Generated by SassMeister.com.

SassMeister-input-HTML.haml

.box
  .child.child--top
  .child.child--middle
  .child.child--bottom

SassMeister-input.scss

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

.box {
  width: 130px;
  padding: 15px;
  background: #3498db;
}

.child {
  width: 100px;
  height: 100px;
  margin: 15px;
  
  &--top { background: #34495e; }
  &--middle { background: inherit; }
  &--bottom { background: #8e44ad; }
}

SassMeister-output.css

.box {
  width: 130px;
  padding: 15px;
  background: #3498db;
}

.child {
  width: 100px;
  height: 100px;
  margin: 15px;
}
.child--top {
  background: #34495e;
}
.child--middle {
  background: inherit;
}
.child--bottom {
  background: #8e44ad;
}

SassMeister-rendered.html

<div class='box'>
  <div class='child child--top'></div>
  <div class='child child--middle'></div>
  <div class='child child--bottom'></div>
</div>