Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="hello">
  <a class="btn-main" href="#">Hi there!</a>
  <a class="btn btn-secondary" href="#">Ok bye!</a>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.0.rc.1)
// ----

$primary-color: #4A8BBD;
$secondary-color: #61CE3C;

@mixin button($color) {
  background: $color;
  @extend %btn;
  &:hover {
    background: darken($color, 20%);
  }
  &:active {
    background: darken($color, 40%);
  }
}

.btn-main {
  @include button($primary-color);
}

.btn-secondary {
  @include button($secondary-color);
}

%btn {
  padding: 1em 2em;
  border-radius: 10px;
  border: 0;
  text-decoration: none;
  color: #fff;
  font-family: Helvetica;
}

SassMeister-output.css

.btn-main {
  background: #4a8bbd;
}
.btn-main:hover {
  background: #2b5576;
}
.btn-main:active {
  background: #101f2b;
}

.btn-secondary {
  background: #61ce3c;
}
.btn-secondary:hover {
  background: #3a8321;
}
.btn-secondary:active {
  background: #16320c;
}

.btn-main, .btn-secondary {
  padding: 1em 2em;
  border-radius: 10px;
  border: 0;
  text-decoration: none;
  color: #fff;
  font-family: Helvetica;
}

SassMeister-rendered.html

<div class="hello">
  <a class="btn-main" href="#">Hi there!</a>
  <a class="btn btn-secondary" href="#">Ok bye!</a>
</div>