Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="button">Apples</div>
<div class="button-green">Bananas</div>

SassMeister-input.scss

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

%button {
  width: 100px;
  padding: .5em 1em;
  margin: 1em 2em;
  border-radius: 5px;
}

@mixin button($color: blue) {
  @extend %button;
  color: $color;
  background-color: lighten($color, 30%);
  border: 3px solid darken($color, 10%);
}

.button {
  @include button;
}

.button-green {
  @include button(green);
}

SassMeister-output.css

.button, .button-green {
  width: 100px;
  padding: .5em 1em;
  margin: 1em 2em;
  border-radius: 5px;
}

.button {
  color: blue;
  background-color: #9999ff;
  border: 3px solid #0000cc;
}

.button-green {
  color: green;
  background-color: #1aff1a;
  border: 3px solid #004d00;
}

SassMeister-rendered.html

<div class="button">Apples</div>
<div class="button-green">Bananas</div>