Generated by SassMeister.com.

SassMeister-input-HTML.html

<a class="btn--primary--sm">Test</a>
<a class="btn--primary--med">Test</a>
<a class="btn--primary--lrg">Test</a>

SassMeister-input.scss

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

//determine rem value for functions
$rem-base: 16;

//Button Map
$btn-size-map: (
  sm : 16,
  med : 20,
  lrg : 24
);

//rem Function
@function rem($px: 16) {
    @return ($px/$rem-base)+rem;
}

//rem Line Height
@function rem-lh($px: $rem-base, $scale: 1.5) {
    @return ( ($px / $rem-base) * $scale ) + rem;
}

$primary-color : #f00;
$light-text-color : #e6f4ee;
$font-size :  12;

@mixin btn ($class, $color, $text-color: $color, $border-color: $color, $border-size: 1px, $display: inline-block, $hover-text: null, $text-decoration: none, $text-transform: null, $radius: null) {
  .btn {
    border: $border-size solid;
    border-radius: $radius + px;
	  border-radius: rem($radius);
  	box-sizing: border-box;
    display: $display;
	  text-decoration: $text-decoration;
	  text-transform: $text-transform;
	  &:hover, &:active {
  		text-decoration: $text-decoration;
  	}
  }
  
  .btn--#{$class} {
      border-color: $border-color;
      color: $text-color;
      &:hover {
          border-color: darken($border-color , 10%);
          background-color: lighten($border-color, 25%);
          color: darken($text-color , 10%);
      }
      &:active {
          border-color: darken( $text-color , 15% );
      }
  }
  
  @each $btn-size, $btn-font-size in $btn-size-map {
    .btn--#{$btn-size}, {
        @extend .btn;
        font-size: $btn-font-size + px;
        font-size: rem($btn-font-size);
        padding: ($btn-font-size*.5) + px ($btn-font-size*.75) + px;
        padding: rem(($btn-font-size*.5)) rem(($btn-font-size*.75));
    }
    .btn--#{$class}--#{$btn-size} {
        @extend .btn--#{$btn-size}, .btn--#{$class};
    }
  }
}

@include btn(primary, $primary-color, $radius: 3);
@include btn(secondary, #45fe00, $radius: 5);

SassMeister-output.css

.btn, .btn--sm, .btn--primary--sm, .btn--secondary--sm, .btn--med, .btn--primary--med, .btn--secondary--med, .btn--lrg, .btn--primary--lrg, .btn--secondary--lrg {
  border: 1px solid;
  border-radius: 3px;
  border-radius: 0.1875rem;
  box-sizing: border-box;
  display: inline-block;
  text-decoration: none;
}
.btn:hover, .btn--sm:hover, .btn--primary--sm:hover, .btn--secondary--sm:hover, .btn--med:hover, .btn--primary--med:hover, .btn--secondary--med:hover, .btn--lrg:hover, .btn--primary--lrg:hover, .btn--secondary--lrg:hover, .btn:active, .btn--sm:active, .btn--primary--sm:active, .btn--secondary--sm:active, .btn--med:active, .btn--primary--med:active, .btn--secondary--med:active, .btn--lrg:active, .btn--primary--lrg:active, .btn--secondary--lrg:active {
  text-decoration: none;
}

.btn--primary, .btn--primary--sm, .btn--primary--med, .btn--primary--lrg {
  border-color: #f00;
  color: #f00;
}
.btn--primary:hover, .btn--primary--sm:hover, .btn--primary--med:hover, .btn--primary--lrg:hover {
  border-color: #cc0000;
  background-color: #ff8080;
  color: #cc0000;
}
.btn--primary:active, .btn--primary--sm:active, .btn--primary--med:active, .btn--primary--lrg:active {
  border-color: #b30000;
}

.btn--sm, .btn--primary--sm, .btn--secondary--sm {
  font-size: 16px;
  font-size: 1rem;
  padding: 8px 12px;
  padding: 0.5rem 0.75rem;
}

.btn--med, .btn--primary--med, .btn--secondary--med {
  font-size: 20px;
  font-size: 1.25rem;
  padding: 10px 15px;
  padding: 0.625rem 0.9375rem;
}

.btn--lrg, .btn--primary--lrg, .btn--secondary--lrg {
  font-size: 24px;
  font-size: 1.5rem;
  padding: 12px 18px;
  padding: 0.75rem 1.125rem;
}

.btn, .btn--sm, .btn--primary--sm, .btn--secondary--sm, .btn--med, .btn--primary--med, .btn--secondary--med, .btn--lrg, .btn--primary--lrg, .btn--secondary--lrg {
  border: 1px solid;
  border-radius: 5px;
  border-radius: 0.3125rem;
  box-sizing: border-box;
  display: inline-block;
  text-decoration: none;
}
.btn:hover, .btn--sm:hover, .btn--primary--sm:hover, .btn--secondary--sm:hover, .btn--med:hover, .btn--primary--med:hover, .btn--secondary--med:hover, .btn--lrg:hover, .btn--primary--lrg:hover, .btn--secondary--lrg:hover, .btn:active, .btn--sm:active, .btn--primary--sm:active, .btn--secondary--sm:active, .btn--med:active, .btn--primary--med:active, .btn--secondary--med:active, .btn--lrg:active, .btn--primary--lrg:active, .btn--secondary--lrg:active {
  text-decoration: none;
}

.btn--secondary, .btn--secondary--sm, .btn--secondary--med, .btn--secondary--lrg {
  border-color: #45fe00;
  color: #45fe00;
}
.btn--secondary:hover, .btn--secondary--sm:hover, .btn--secondary--med:hover, .btn--secondary--lrg:hover {
  border-color: #37cb00;
  background-color: #a1ff7f;
  color: #37cb00;
}
.btn--secondary:active, .btn--secondary--sm:active, .btn--secondary--med:active, .btn--secondary--lrg:active {
  border-color: #30b200;
}

.btn--sm, .btn--primary--sm, .btn--secondary--sm {
  font-size: 16px;
  font-size: 1rem;
  padding: 8px 12px;
  padding: 0.5rem 0.75rem;
}

.btn--med, .btn--primary--med, .btn--secondary--med {
  font-size: 20px;
  font-size: 1.25rem;
  padding: 10px 15px;
  padding: 0.625rem 0.9375rem;
}

.btn--lrg, .btn--primary--lrg, .btn--secondary--lrg {
  font-size: 24px;
  font-size: 1.5rem;
  padding: 12px 18px;
  padding: 0.75rem 1.125rem;
}

SassMeister-rendered.html

<a class="btn--primary--sm">Test</a>
<a class="btn--primary--med">Test</a>
<a class="btn--primary--lrg">Test</a>