Generated by SassMeister.com.

SassMeister-input-HTML.html

<button class="primary">Button</button>
<button class="success">Button</button>
<button class="warning">Button</button>
<button class="alert">Button</button>

SassMeister-input.scss

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

.tom {color:red;}
//Core Values
$font-size: 16;
$primary: #3277b3;
$success: adjust_hue($primary, 260);
$warning: saturate(adjust_hue($primary, 188),43);
$alert: lighten(saturate(adjust_hue($primary, 162),12),0);

//functions
@function em ($target, $context: $font-size) {
  @return ($target/$context)  * 1em;

}
//default values
$button-color: $primary !default;
$button-text-color: white !default;
$button-line-height: 32 !default;
$button-border-radius: 3 !default;
$button-padding: 30 !default;
$button-font-size: 24 !default;
$button-weight: bold !default;

//the mixin

@mixin default-button (
  $color: $button-text-color,
  $line-height:$button-line-height,
  $radius: $button-border-radius,
  $padding: $button-padding,
  $font-size: $button-font-size,
  $weight: $button-weight
)  {
  color:$color;
  line-height: em($line-height);
  border-radius: em($radius);
  padding: 0 em($padding);
  font-size: em($font-size);
  font-weight: $weight;
}

@mixin flat-button ($color: $button-color){
  //@include default-button;
  $highlight-color: lighten($color, 50%);
  $shadow-color: grayscale(transparentize($color, 0.1));
  
 background-color: $color;
 border: 1px solid darken($color, 10%);
 text-shadow: 0 1px 1px darken($color, 10%);
 box-shadow: 0 em(2) em(6) 0 $shadow-color;
 
 &:hover{background-color: darken($color, 5%)}
 
}
//placeholder selector
%default-button {
  
  @include default-button;
}
// Selectors

.primary {
  @extend %default-button;
  @include flat-button($primary);
}

.success {
  @extend %default-button;
  @include flat-button($success);
}

.warning {
  @extend %default-button;
  @include flat-button($warning);
}

.alert {
  @extend %default-button;
  @include flat-button($alert);
}

SassMeister-output.css

.tom {
  color: red;
}

.primary, .success, .warning, .alert {
  color: white;
  line-height: 2em;
  border-radius: 0.1875em;
  padding: 0 1.875em;
  font-size: 1.5em;
  font-weight: bold;
}

.primary {
  background-color: #3277b3;
  border: 1px solid #275c8b;
  text-shadow: 0 1px 1px #275c8b;
  box-shadow: 0 0.125em 0.375em 0 rgba(114, 114, 114, 0.9);
}
.primary:hover {
  background-color: #2c6a9f;
}

.success {
  background-color: #4cb332;
  border: 1px solid #3b8b27;
  text-shadow: 0 1px 1px #3b8b27;
  box-shadow: 0 0.125em 0.375em 0 rgba(114, 114, 114, 0.9);
}
.success:hover {
  background-color: #449f2c;
}

.warning {
  background-color: #e48901;
  border: 1px solid #b16a01;
  text-shadow: 0 1px 1px #b16a01;
  box-shadow: 0 0.125em 0.375em 0 rgba(114, 114, 114, 0.9);
}
.warning:hover {
  background-color: #cb7a01;
}

.alert {
  background-color: #c13e24;
  border: 1px solid #96301c;
  text-shadow: 0 1px 1px #96301c;
  box-shadow: 0 0.125em 0.375em 0 rgba(114, 114, 114, 0.9);
}
.alert:hover {
  background-color: #ab3720;
}

SassMeister-rendered.html

<button class="primary">Button</button>
<button class="success">Button</button>
<button class="warning">Button</button>
<button class="alert">Button</button>