Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="my-AwesomeBox my-AwesomeBox--small">
  <h1 class="my-AwesomeBox-title">Small Box</h1>
</div>

<div class="my-AwesomeBox">
  <h1 class="my-AwesomeBox-title">Normal Title</h1>
</div>

<div class="my-AwesomeBox">
  <h1 class="my-AwesomeBox-title my-AwesomeBox-title--large">Large Title</h1>
</div>

<div class="my-AwesomeBox">
  <h1 class="my-AwesomeBox-title my-u-center">Centered Title</h1>
</div>

<div class="my-AwesomeBox is-selected">
  <h1 class="my-AwesomeBox-title">Selected Box</h1>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.0)
// ----

.my-AwesomeBox {
  background-color: blue;
  border: 1px solid black;
  margin: 1rem;
  width: 250px;
  // .my-AwesomeBox--small
  &--small {
    width: 100px;
  }
  // .my-AwesomeBox-title
  &-title {
    font-size: 1rem;
    color: white;
    // .my-AwesomeBox--large
    &--large {
      font-size: 2rem;
    }
  }
  &.is-selected {
    background-color: red;
  }
}

.my-u-center {
  text-align:center;
}

SassMeister-output.css

.my-AwesomeBox {
  background-color: blue;
  border: 1px solid black;
  margin: 1rem;
  width: 250px;
}
.my-AwesomeBox--small {
  width: 100px;
}
.my-AwesomeBox-title {
  font-size: 1rem;
  color: white;
}
.my-AwesomeBox-title--large {
  font-size: 2rem;
}
.my-AwesomeBox.is-selected {
  background-color: red;
}

.my-u-center {
  text-align: center;
}

SassMeister-rendered.html

<div class="my-AwesomeBox my-AwesomeBox--small">
  <h1 class="my-AwesomeBox-title">Small Box</h1>
</div>

<div class="my-AwesomeBox">
  <h1 class="my-AwesomeBox-title">Normal Title</h1>
</div>

<div class="my-AwesomeBox">
  <h1 class="my-AwesomeBox-title my-AwesomeBox-title--large">Large Title</h1>
</div>

<div class="my-AwesomeBox">
  <h1 class="my-AwesomeBox-title my-u-center">Centered Title</h1>
</div>

<div class="my-AwesomeBox is-selected">
  <h1 class="my-AwesomeBox-title">Selected Box</h1>
</div>