Generated by SassMeister.com.

SassMeister-input-HTML.html

<span class="mint mint-100"></span>
<span class="mint mint-200"></span>
<span class="mint mint-300"></span>
<span class="mint mint-400"></span>
<span class="mint mint-500"></span>
<span class="mint mint-600"></span>
<span class="mint mint-700"></span>
<span class="mint mint-800"></span>
<span class="mint mint-900"></span>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

.fcn-button {
  background-color: red;
}

.fcn-button.fcn-button--blue {
  background: blue;
}

.fcn-button.fcn-button--green {
  background: green;
}

.WRAPPER {
  display: flex;
  position: relative;

  .CHILD {
    @extend .fcn-button;
    position: absolute;
  }
}

SassMeister-output.css

.fcn-button, .WRAPPER .CHILD {
  background-color: red;
}

.fcn-button.fcn-button--blue, .WRAPPER .fcn-button--blue.CHILD {
  background: blue;
}

.fcn-button.fcn-button--green, .WRAPPER .fcn-button--green.CHILD {
  background: green;
}

.WRAPPER {
  display: flex;
  position: relative;
}

.WRAPPER .CHILD {
  position: absolute;
}

SassMeister-rendered.html

<span class="mint mint-100"></span>
<span class="mint mint-200"></span>
<span class="mint mint-300"></span>
<span class="mint mint-400"></span>
<span class="mint mint-500"></span>
<span class="mint mint-600"></span>
<span class="mint mint-700"></span>
<span class="mint mint-800"></span>
<span class="mint mint-900"></span>