Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

%btn--default {
    border-radius: 2px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    margin: 0;
}
%btn--primary {
  margin: 20px;
  background-color: green;
}
%btn--secondary {
  background-color: gray;
}

@function capitalize($str) {
  @return to-upper-case(str_slice($str, 1, 1)) + str_slice($str, 2);
}

/// Create buttons based off of button types. This allows you to have 
/// semantic button names while still using a few main button styles. Create 
/// your default button styles using a %placeholder class.
/// @param {String} $type - the type of button to use
/// @param {String} $bgcolor - background color of the button
/// @param {String} $color - foreground (text) color of the button
/// @param {String} $hover - the type of button to use
/// @author Michael Turnwall
/// @example
///		.btn--submit {
///			@include makeBtn('primary');
///		}
///		.btn--cancel {
///			@include makeBtn('secondary');
///		}
@mixin makeBtn($type: null, $bgColor: null, $color: #fff, $hover: null) {
    @extend %btn--default !optional;
    // @if $type {
      @extend %btn--#{$type};
    // }
    background: $bgColor;
    @content;
    @if $hover {
      &:hover {
        background-color: $hover;
      }
    } @else {
      &:hover {
        background-color: $hover;
      }
    }
}

.btn {

  &--submit {
    @include makeBtn('primary');
  }
  &--cancel {
    @include makeBtn('secondary', $hover: red);
  }
  &--submitContact {
    @include makeBtn('hello');
  }
}

SassMeister-output.css

.btn--submit, .btn--cancel, .btn--submitContact {
  border-radius: 2px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  margin: 0;
}

.btn--submit {
  margin: 20px;
  background-color: green;
}

.btn--cancel {
  background-color: gray;
}

.btn--cancel:hover {
  background-color: red;
}