button-mixin

button-mixin-output.css

.button, .button-primary, .button-success, .button-warning, .button-danger, .button-info {
  border-radius: 3px;
  height: inherit;
  display: inline-block;
  padding: 10px 16px;
  margin-bottom: 0;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
}

.button {
  background: white;
  border: 1px solid #d6dce0;
}
.button i {
  color: #404b59;
}

.button-primary {
  background: #04a5f1;
  border: none;
  color: white;
}

.button-success {
  background: #4ed47a;
  border: none;
  color: white;
}

.button-warning {
  background: #f0ad4e;
  border: none;
  color: white;
}

.button-danger {
  background: #ce4545;
  border: none;
  color: white;
}

.button-info {
  background: #5bc0de;
  border: none;
  color: white;
}

button-mixin.sass

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

$button-green: #4ED47A
$button-blue: #04A5F1
$button-yellow: #f0ad4e
$button-red: #ce4545
$button-lightBlue: #5bc0de
$button-border: #D6DCE0
$button-icon-color: #404b59
$false: nil

%button-base
  border-radius: 3px
  height: inherit
  display: inline-block
  padding: 10px 16px
  margin-bottom: 0
  text-align: center
  vertical-align: middle
  cursor: pointer
  text-decoration: none
  white-space: nowrap
  text-transform: uppercase
  letter-spacing: .1em
  font-size: 12px

@mixin button($name, $background:white)
  @if $name == $false
    .button
      @extend %button-base
      background: $background
      border: 1px solid $button-border
      i
        color: $button-icon-color
  @else
    .button-#{$name}
      @extend %button-base
      background: $background
      border: none
      color: white

@include button($false, white)
@include button(primary,$button-blue)
@include button(success,$button-green)
@include button(warning,$button-yellow)
@include button(danger,$button-red)
@include button(info,$button-lightBlue)