Generated by SassMeister.com.

SassMeister-input-HTML.haml

#foo
  .b-module
    I’m a b-module
  .a-module
    .a-module__title
      I’m a-module’s title
    .a-module__close
      I’m an encapsulated b-module inside an a-module

SassMeister-input.scss

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

#foo {
  background: #eee;
  padding: 20px;
}

.a-module {
  background: #ccc;
  height: 200px;
  padding: 10px;
  position: relative;
  
  &__title {
    font-size: 30px;
    font-weight: bold;
  }
  
  &__close {
    @extend .b-module;
    position: absolute;
    top: 0px;
    right: 0px;
  }
  
}

.b-module {
  background: green;
  color: white;
  padding: 10px;
  width: 200px;
  height: 50px;
}

SassMeister-output.css

#foo {
  background: #eee;
  padding: 20px;
}

.a-module {
  background: #ccc;
  height: 200px;
  padding: 10px;
  position: relative;
}
.a-module__title {
  font-size: 30px;
  font-weight: bold;
}
.a-module__close {
  position: absolute;
  top: 0px;
  right: 0px;
}

.b-module, .a-module__close {
  background: green;
  color: white;
  padding: 10px;
  width: 200px;
  height: 50px;
}

SassMeister-rendered.html

<div id='foo'>
  <div class='b-module'>
    I’m a b-module
  </div>
  <div class='a-module'>
    <div class='a-module__title'>
      I’m a-module’s title
    </div>
    <div class='a-module__close'>
      I’m an encapsulated b-module inside an a-module
    </div>
  </div>
</div>