Generated by SassMeister.com.

SassMeister-input-HTML.html

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

SassMeister-input.scss

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

// 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), 4);

// Function
@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;

// 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) {
  $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, 20%);
  box-shadow: 0 em(2) em(6) 0 $shadow-color;
  &:hover {
    background-color: darken($color, 6%);
    cursor: pointer;
  }
}


// Placeholder
%default-button {
  @include default-button;
}


// Selector
.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

.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 #1c4263;
  box-shadow: 0 0.125em 0.375em 0 rgba(114, 114, 114, 0.9);
}

.primary:hover {
  background-color: #2b679b;
  cursor: pointer;
}

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

.success:hover {
  background-color: #429b2b;
  cursor: pointer;
}

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

.warning:hover {
  background-color: #c67701;
  cursor: pointer;
}

.alert {
  background-color: #d24427;
  border: 1px solid #a7361f;
  text-shadow: 0 1px 1px #7c2817;
  box-shadow: 0 0.125em 0.375em 0 rgba(125, 125, 125, 0.9);
}

.alert:hover {
  background-color: #b83b23;
  cursor: pointer;
}

SassMeister-rendered.html

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