Generated by SassMeister.com.

SassMeister-input-HTML.html

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

SassMeister-input.scss

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

$primary-color: #4a8bbd;
$secondary-color: #61ce3c;

@import url("http://fonts.googleapis.com/css?family=Open+Sans");

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

%btn {
  padding: 1em 2em;
  border-radius: 10px;
  border: 0;
}

input {
  &[type="submit"] {
    @include button($primary-color);
  }
  @media (min-width: 481px) {
    color: green;
  }
}

.btn-main {
  @include button($primary-color);
  @media (min-width: 481px) {
    color: green;
  }
}

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

SassMeister-output.css

@import url("http://fonts.googleapis.com/css?family=Open+Sans");
input[type="submit"], .btn-main, .btn-secondary {
  padding: 1em 2em;
  border-radius: 10px;
  border: 0;
}

input[type="submit"] {
  background: #4a8bbd;
}
input[type="submit"]:hover {
  background: #2b5576;
}
@media (min-width: 481px) {
  input {
    color: green;
  }
}

.btn-main {
  background: #4a8bbd;
}
.btn-main:hover {
  background: #2b5576;
}
@media (min-width: 481px) {
  .btn-main {
    color: green;
  }
}

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

SassMeister-rendered.html

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