Generated by SassMeister.com.

SassMeister-input-HTML.html

<button class="button button-default">Default</button>
<button class="button button-success">Success</button>
<button class="button button-warning">Warning</button>
<button class="button button-info">Info</button>

SassMeister-input.scss

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

// Configuration
$btn-name: 'button';
$btn-color: (
  default: #7f8c8d,
  success: #27ae60,
  danger:  #c0392b,
  warning: #f1c40f,
  info:    #2980b9
) !default;

.#{$btn-name} {
  display: inline-block;
  vertical-align: middle;
  font: inherit;
  cursor: pointer;
  border: 0;
  background: transparent;
  outline: none;
  padding: .5em;
  margin-bottom: 1em;
  color: #fff;
  transition: background .15s;
  box-shadow: inset 0 1px rgba(255, 255, 255, .2);
  border-radius: .15em;
}

@each $key, $value in $btn-color {
  .button-#{$key} {
      background: $value;
      &:hover {
        background: darken($value, 10%);
      }
  }
}

SassMeister-output.css

.button {
  display: inline-block;
  vertical-align: middle;
  font: inherit;
  cursor: pointer;
  border: 0;
  background: transparent;
  outline: none;
  padding: .5em;
  margin-bottom: 1em;
  color: #fff;
  transition: background .15s;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.2);
  border-radius: .15em;
}

.button-default {
  background: #7f8c8d;
}
.button-default:hover {
  background: #667273;
}

.button-success {
  background: #27ae60;
}
.button-success:hover {
  background: #1e8449;
}

.button-danger {
  background: #c0392b;
}
.button-danger:hover {
  background: #962d22;
}

.button-warning {
  background: #f1c40f;
}
.button-warning:hover {
  background: #c29d0b;
}

.button-info {
  background: #2980b9;
}
.button-info:hover {
  background: #20638f;
}

SassMeister-rendered.html

<button class="button button-default">Default</button>
<button class="button button-success">Success</button>
<button class="button button-warning">Warning</button>
<button class="button button-info">Info</button>