Generated by SassMeister.com.

SassMeister-input-HTML.html

<button class="button">.button</button>
<button class="button--yellow">.button--yellow</button>
<button class="button_blue">.button_blue</button>
<button class="button-green">.button-green</button>
<button class="buttonPink">.buttonPink</button>

SassMeister-input.scss

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

.button {
  background: #F00;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.25rem;
  padding: 1rem 2rem;
  box-shadow: 0 -4px 0px 0 rgba(0,0,0,.2)inset;
  &--yellow {
    @extend .button;
    background: #FF0;
  }
  &_blue {
    @extend .button;
    background: #00F;
  }
  &-green {
    @extend .button;
    background: #0F0;
  }
  &Pink {
    @extend .button;
    background: #F0F;
  }
}

SassMeister-output.css

.button, .button--yellow, .button_blue, .button-green, .buttonPink {
  background: #F00;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.25rem;
  padding: 1rem 2rem;
  box-shadow: 0 -4px 0px 0 rgba(0, 0, 0, 0.2) inset;
}
.button--yellow {
  background: #FF0;
}
.button_blue {
  background: #00F;
}
.button-green {
  background: #0F0;
}
.buttonPink {
  background: #F0F;
}

SassMeister-rendered.html

<button class="button">.button</button>
<button class="button--yellow">.button--yellow</button>
<button class="button_blue">.button_blue</button>
<button class="button-green">.button-green</button>
<button class="buttonPink">.buttonPink</button>