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>

SassMeister-input.scss

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

// SUIT CSS descendant selector helper. Keeps CSS flat at root.
@mixin jl-desc($names...) {
  @each $name in $names {
    @at-root &-#{$name} { @content; }
  }
}

// SUIT CSS modifier selector helper. Keeps CSS flat at root.
@mixin jl-mod($names...) {
  @each $name in $names {
    @at-root &--#{$name} { @content; }
  }
}

.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-title--large
    &--large {
      font-size: 2rem;
    }
  }
}

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;
}

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>