Generated by SassMeister.com.

SassMeister-input-HTML.html

<button class="btn btn--large">
  <a class="btn__title">Hello</a>
  <p class="btn__content">Hi there</p>
</button>

SassMeister-input.scss

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

.btn {
  width: auto;
  border: 1px solid black;
  
  /* e */
  &__title {
    font-size: large;
  }
  
  &__content {
    font-size: small;
    color: tomato;
    
    &--blue {
      color: blue;
    }
  }
  
  /* m */
  &--large {
    height: 200%;
    color: green;
  }
  
  &--medium {
    height: 10px;
  }
}

SassMeister-output.css

.btn {
  width: auto;
  border: 1px solid black;
  /* e */
  /* m */
}
.btn__title {
  font-size: large;
}
.btn__content {
  font-size: small;
  color: tomato;
}
.btn__content--blue {
  color: blue;
}
.btn--large {
  height: 200%;
  color: green;
}
.btn--medium {
  height: 10px;
}

SassMeister-rendered.html

<button class="btn btn--large">
  <a class="btn__title">Hello</a>
  <p class="btn__content">Hi there</p>
</button>