Generated by SassMeister.com.

SassMeister-input-HTML.haml

%h1 MyBox module

.my-box
  .my-box__content
    This is <code>my-box</code>.

%br
%br
%br

%h1 MyToolbar module

.my-toolbar
  %a.my-toolbar__close-button(href='#') ⓧ

%br
%br
%br

%h1 MyHint module

.my-hint
  A <code>my-hint</code>.

%br
%br
%br

%h1 MyWidget module

%span.my-widget
  A <code>my-widget</code>.

%br
%br
%br

%h1 Module composition

.my-box
  .my-box__toolbar
    .my-toolbar
      %a.my-toolbar__close-button(href='#') ⓧ
  .my-box__content
    %p This is <code>my-box</code>.
    %span.my-widget.placed
      A <code>my-widget</code>.
    .my-hint.placed
      A <code>my-hint</code>.
      %span.my-hint__widget
        %span.my-widget.placed
          A <code>my-widget</code>.
    %p And again some text.

SassMeister-input.scss

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

// General rules

body {
  width: 600px;
  margin: {
    left: auto;
    right: auto;
  };
  font-family: Arial, sans-serif;
}

// MyBox module

.my-box {
  min-height: 20px;
  padding: 20px;
  background: #eee;
}

.my-box__toolbar {
  margin: {
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: 20px;
  }
}

// MyToolbar module

.my-toolbar {
  background: #333;
  color: white;
  overflow: hidden;
}

.my-toolbar__close-button {
  float: right;
  text-decoration: none;
  width: 30px;
  text-align: center;
  color: white;
}

// MyHint module

.my-hint {
  padding: 20px;
  background: lighten(gold, 30%);
}

// MyWidget module

.my-widget {
  background: darken(red, 15%);
  color: white;
}

// Placements

.my-box__content > .my-hint.placed {
  margin: {
    left: -20px;
    right: -20px;
  };
}

.my-box__content > .my-widget.placed {
  position: relative;
  left: 50px;
  margin-bottom: 20px;
  display: block;
  width: 150px;
}

.my-hint__widget > .my-widget.placed {
  display: inline-block;
  width: 300px;
}

SassMeister-output.css

body {
  width: 600px;
  margin-left: auto;
  margin-right: auto;
  font-family: Arial, sans-serif;
}

.my-box {
  min-height: 20px;
  padding: 20px;
  background: #eee;
}

.my-box__toolbar {
  margin-top: -20px;
  margin-left: -20px;
  margin-right: -20px;
  margin-bottom: 20px;
}

.my-toolbar {
  background: #333;
  color: white;
  overflow: hidden;
}

.my-toolbar__close-button {
  float: right;
  text-decoration: none;
  width: 30px;
  text-align: center;
  color: white;
}

.my-hint {
  padding: 20px;
  background: #ffef99;
}

.my-widget {
  background: #b30000;
  color: white;
}

.my-box__content > .my-hint.placed {
  margin-left: -20px;
  margin-right: -20px;
}

.my-box__content > .my-widget.placed {
  position: relative;
  left: 50px;
  margin-bottom: 20px;
  display: block;
  width: 150px;
}

.my-hint__widget > .my-widget.placed {
  display: inline-block;
  width: 300px;
}

SassMeister-rendered.html

<h1>MyBox module</h1>
<div class='my-box'>
  <div class='my-box__content'>
    This is <code>my-box</code>.
  </div>
</div>
<br>
<br>
<br>
<h1>MyToolbar module</h1>
<div class='my-toolbar'>
  <a class='my-toolbar__close-button' href='#'>ⓧ</a>
</div>
<br>
<br>
<br>
<h1>MyHint module</h1>
<div class='my-hint'>
  A <code>my-hint</code>.
</div>
<br>
<br>
<br>
<h1>MyWidget module</h1>
<span class='my-widget'>
  A <code>my-widget</code>.
</span>
<br>
<br>
<br>
<h1>Module composition</h1>
<div class='my-box'>
  <div class='my-box__toolbar'>
    <div class='my-toolbar'>
      <a class='my-toolbar__close-button' href='#'>ⓧ</a>
    </div>
  </div>
  <div class='my-box__content'>
    <p>This is <code>my-box</code>.</p>
    <span class='my-widget placed'>
      A <code>my-widget</code>.
    </span>
    <div class='my-hint placed'>
      A <code>my-hint</code>.
      <span class='my-hint__widget'>
        <span class='my-widget placed'>
          A <code>my-widget</code>.
        </span>
      </span>
    </div>
    <p>And again some text.</p>
  </div>
</div>