Generated by SassMeister.com.

SassMeister-input-HTML.html

<a href="#" class="btn--primary--sm">I'm a button</a>
<a href="#" class="btn--primary--med">I'm a button</a>
<a href="#" class="btn--primary--lrg">I'm a button</a>

<a href="#" class="btn--secondary--sm">I'm a button</a>
<a href="#" class="btn--secondary--med">I'm a button</a>
<a href="#" class="btn--secondary--lrg">I'm a button</a>

<a href="#" class="btn--square--sm">I'm a button</a>
<a href="#" class="btn--square--med">I'm a button</a>
<a href="#" class="btn--square--lrg">I'm a button</a>

SassMeister-input.scss

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

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

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

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

$primary-color: #333;

@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;
    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;
      border-radius: $radius + px;
      border-radius: rem($radius);
      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);
@include btn(square, $primary-color, $radius: 12);

SassMeister-output.css

/* determine rem value for functions */
/* rem Function */
.btn, .btn--sm, .btn--primary--sm, .btn--secondary--sm, .btn--square--sm, .btn--med, .btn--primary--med, .btn--secondary--med, .btn--square--med, .btn--lrg, .btn--primary--lrg, .btn--secondary--lrg, .btn--square--lrg {
  border: 1px solid;
  box-sizing: border-box;
  display: inline-block;
  text-decoration: none;
}
.btn:hover, .btn--sm:hover, .btn--primary--sm:hover, .btn--secondary--sm:hover, .btn--square--sm:hover, .btn--med:hover, .btn--primary--med:hover, .btn--secondary--med:hover, .btn--square--med:hover, .btn--lrg:hover, .btn--primary--lrg:hover, .btn--secondary--lrg:hover, .btn--square--lrg:hover, .btn:active, .btn--sm:active, .btn--primary--sm:active, .btn--secondary--sm:active, .btn--square--sm:active, .btn--med:active, .btn--primary--med:active, .btn--secondary--med:active, .btn--square--med:active, .btn--lrg:active, .btn--primary--lrg:active, .btn--secondary--lrg:active, .btn--square--lrg:active {
  text-decoration: none;
}

.btn--primary, .btn--primary--sm, .btn--primary--med, .btn--primary--lrg {
  border-color: #333;
  border-radius: 3px;
  border-radius: 0.1875rem;
  color: #333;
}
.btn--primary:hover, .btn--primary--sm:hover, .btn--primary--med:hover, .btn--primary--lrg:hover {
  border-color: #1a1a1a;
  background-color: #737373;
  color: #1a1a1a;
}
.btn--primary:active, .btn--primary--sm:active, .btn--primary--med:active, .btn--primary--lrg:active {
  border-color: #0d0d0d;
}

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

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

.btn--lrg, .btn--primary--lrg, .btn--secondary--lrg, .btn--square--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--square--sm, .btn--med, .btn--primary--med, .btn--secondary--med, .btn--square--med, .btn--lrg, .btn--primary--lrg, .btn--secondary--lrg, .btn--square--lrg {
  border: 1px solid;
  box-sizing: border-box;
  display: inline-block;
  text-decoration: none;
}
.btn:hover, .btn--sm:hover, .btn--primary--sm:hover, .btn--secondary--sm:hover, .btn--square--sm:hover, .btn--med:hover, .btn--primary--med:hover, .btn--secondary--med:hover, .btn--square--med:hover, .btn--lrg:hover, .btn--primary--lrg:hover, .btn--secondary--lrg:hover, .btn--square--lrg:hover, .btn:active, .btn--sm:active, .btn--primary--sm:active, .btn--secondary--sm:active, .btn--square--sm:active, .btn--med:active, .btn--primary--med:active, .btn--secondary--med:active, .btn--square--med:active, .btn--lrg:active, .btn--primary--lrg:active, .btn--secondary--lrg:active, .btn--square--lrg:active {
  text-decoration: none;
}

.btn--secondary, .btn--secondary--sm, .btn--secondary--med, .btn--secondary--lrg {
  border-color: #45fe00;
  border-radius: 5px;
  border-radius: 0.3125rem;
  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, .btn--square--sm {
  font-size: 16px;
  font-size: 1rem;
  padding: 8px 12px;
  padding: 0.5rem 0.75rem;
}

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

.btn--lrg, .btn--primary--lrg, .btn--secondary--lrg, .btn--square--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--square--sm, .btn--med, .btn--primary--med, .btn--secondary--med, .btn--square--med, .btn--lrg, .btn--primary--lrg, .btn--secondary--lrg, .btn--square--lrg {
  border: 1px solid;
  box-sizing: border-box;
  display: inline-block;
  text-decoration: none;
}
.btn:hover, .btn--sm:hover, .btn--primary--sm:hover, .btn--secondary--sm:hover, .btn--square--sm:hover, .btn--med:hover, .btn--primary--med:hover, .btn--secondary--med:hover, .btn--square--med:hover, .btn--lrg:hover, .btn--primary--lrg:hover, .btn--secondary--lrg:hover, .btn--square--lrg:hover, .btn:active, .btn--sm:active, .btn--primary--sm:active, .btn--secondary--sm:active, .btn--square--sm:active, .btn--med:active, .btn--primary--med:active, .btn--secondary--med:active, .btn--square--med:active, .btn--lrg:active, .btn--primary--lrg:active, .btn--secondary--lrg:active, .btn--square--lrg:active {
  text-decoration: none;
}

.btn--square, .btn--square--sm, .btn--square--med, .btn--square--lrg {
  border-color: #333;
  border-radius: 12px;
  border-radius: 0.75rem;
  color: #333;
}
.btn--square:hover, .btn--square--sm:hover, .btn--square--med:hover, .btn--square--lrg:hover {
  border-color: #1a1a1a;
  background-color: #737373;
  color: #1a1a1a;
}
.btn--square:active, .btn--square--sm:active, .btn--square--med:active, .btn--square--lrg:active {
  border-color: #0d0d0d;
}

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

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

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

SassMeister-rendered.html

<a href="#" class="btn--primary--sm">I'm a button</a>
<a href="#" class="btn--primary--med">I'm a button</a>
<a href="#" class="btn--primary--lrg">I'm a button</a>

<a href="#" class="btn--secondary--sm">I'm a button</a>
<a href="#" class="btn--secondary--med">I'm a button</a>
<a href="#" class="btn--secondary--lrg">I'm a button</a>

<a href="#" class="btn--square--sm">I'm a button</a>
<a href="#" class="btn--square--med">I'm a button</a>
<a href="#" class="btn--square--lrg">I'm a button</a>