Generated by SassMeister.com.

SassMeister-input-HTML.html

<input/>
<button class="btn--default btn--small">Button</button>
<button class="btn--default--outline btn--small">Button</button>
<br>
<button class="btn--default btn--regular">Button</button>
<button class="btn--default--outline btn--regular">Button</button>
<br>
<button class="btn--default btn--medium">Button</button>
<button class="btn--default--outline btn--medium">Button</button>
<br>
<button class="btn--default btn--large">Button</button>
<button class="btn--default--outline btn--large">Button</button>
<br><br>

<button class="btn--alert btn--small">Button</button>
<button class="btn--alert--outline btn--small">Button</button>
<br>
<button class="btn--alert btn--regular">Button</button>
<button class="btn--alert--outline btn--regular">Button</button>
<br>
<button class="btn--alert btn--medium">Button</button>
<button class="btn--alert--outline btn--medium">Button</button>
<br>
<button class="btn--alert btn--large">Button</button>
<button class="btn--alert--outline btn--large">Button</button>
<br><br>

<button class="btn--warning btn--small">Button</button>
<button class="btn--warning--outline btn--small">Button</button>
<br>
<button class="btn--warning btn--regular">Button</button>
<button class="btn--warning--outline btn--regular">Button</button>
<br>
<button class="btn--warning btn--medium">Button</button>
<button class="btn--warning--outline btn--medium">Button</button>
<br>
<button class="btn--warning btn--large">Button</button>
<button class="btn--warning--outline btn--large">Button</button>
<br><br>

<button class="btn--success btn--small">Button</button>
<button class="btn--success--outline btn--small">Button</button>
<br>
<button class="btn--success btn--regular">Button</button>
<button class="btn--success--outline btn--regular">Button</button>
<br>
<button class="btn--success btn--medium">Button</button>
<button class="btn--success--outline btn--medium">Button</button>
<br>
<button class="btn--success btn--large">Button</button>
<button class="btn--success--outline btn--large">Button</button>
<br><br>

SassMeister-input.scss

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

body {
  font-family: DIN;
  font-size: 14px;
  font-weight: regular;
  line-height: 22px;
}

button, input, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: 14px;
}


@mixin modifier($name) {
  @at-root {
    // '&' is a double-wrapped list
    $selector: nth(&, 1);
    // direct parent will be the last item in that list
    $direct-parent: nth($selector, length($selector));
    // modifier should have all properties of parent
    #{$direct-parent}--#{$name} { @extend #{$direct-parent}; }
    // '@content' will be in a nested selector however, if that is the context
    #{&}--#{$name} { @content; }
  }
}
 
// a BEM element() mixin--as has been seen elsewhere
@mixin element($name) {
  @at-root {
    #{&}__#{$name} {
      @content;
    }
  }
}




$buttonSize: (small 12px, regular 14px, medium 18px, large 22px);

@mixin button ($colour) {
  $colour-lightness: lightness($colour);
  
  background: $colour;
  border: 1px solid $colour;

  &:hover { background: lighten($colour, 10 - $colour-lightness/10); }
  &:active { background: darken($colour, 10 - $colour-lightness/10); }
  
  @include modifier('outline') {
    border-color: $colour;
    color: $colour;
    background: white;
    &:hover { background: lighten($colour, 95 - $colour-lightness); }
    &:active { background: lighten($colour, 90 - $colour-lightness); }
  }
}

button, .btn {
  border-radius: 3px;
  color: white;
  cursor: pointer;
  
  @include modifier('default') {
    @include button(#73C4F2);
  }
  
  @include modifier('alert') {
    @include button(#F51F21);
  }
  
  @include modifier('warning') {
     @include button(#FFAA4A);
  }
  
  @include modifier('success') {
     @include button(#00C55D);
  }
  
  @each $size in $buttonSize {
    $temporary-font-size: nth($size, 2);
    &--#{nth($size, 1)} {
      font-size: $temporary-font-size;
      padding: $temporary-font-size/2 $temporary-font-size;
    }
  }
}

input, .input {

}

SassMeister-output.css

body {
  font-family: DIN;
  font-size: 14px;
  font-weight: regular;
  line-height: 22px;
}

button, button--default, button--outline, button--alert, button--warning, button--success, input, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: 14px;
}

button, button--default, button--outline, button--alert, button--warning, button--success, .btn {
  border-radius: 3px;
  color: white;
  cursor: pointer;
}
button, button--default, button--outline, button--alert, button--warning, button--success, .btn--default {
  background: #73C4F2;
  border: 1px solid #73C4F2;
}
button:hover, button--default:hover, button--outline:hover, button--alert:hover, button--warning:hover, button--success:hover, .btn--default:hover {
  background: #81caf3;
}
button:active, button--default:active, button--outline:active, button--alert:active, button--warning:active, button--success:active, .btn--default:active {
  background: #65bef1;
}
button, button--default, button--outline, button--alert, button--warning, button--success, .btn--default--outline {
  border-color: #73C4F2;
  color: #73C4F2;
  background: white;
}
button:hover, button--default:hover, button--outline:hover, button--alert:hover, button--warning:hover, button--success:hover, .btn--default--outline:hover {
  background: #e8f5fd;
}
button:active, button--default:active, button--outline:active, button--alert:active, button--warning:active, button--success:active, .btn--default--outline:active {
  background: #d0ebfb;
}
button, button--default, button--outline, button--alert, button--warning, button--success, .btn--alert {
  background: #F51F21;
  border: 1px solid #F51F21;
}
button:hover, button--default:hover, button--outline:hover, button--alert:hover, button--warning:hover, button--success:hover, .btn--alert:hover {
  background: #f63537;
}
button:active, button--default:active, button--outline:active, button--alert:active, button--warning:active, button--success:active, .btn--alert:active {
  background: #f20b0d;
}
button, button--default, button--outline, button--alert, button--warning, button--success, .btn--alert--outline {
  border-color: #F51F21;
  color: #F51F21;
  background: white;
}
button:hover, button--default:hover, button--outline:hover, button--alert:hover, button--warning:hover, button--success:hover, .btn--alert--outline:hover {
  background: #fee7e7;
}
button:active, button--default:active, button--outline:active, button--alert:active, button--warning:active, button--success:active, .btn--alert--outline:active {
  background: #fdcecf;
}
button, button--default, button--outline, button--alert, button--warning, button--success, .btn--warning {
  background: #FFAA4A;
  border: 1px solid #FFAA4A;
}
button:hover, button--default:hover, button--outline:hover, button--alert:hover, button--warning:hover, button--success:hover, .btn--warning:hover {
  background: #ffb35c;
}
button:active, button--default:active, button--outline:active, button--alert:active, button--warning:active, button--success:active, .btn--warning:active {
  background: #ffa238;
}
button, button--default, button--outline, button--alert, button--warning, button--success, .btn--warning--outline {
  border-color: #FFAA4A;
  color: #FFAA4A;
  background: white;
}
button:hover, button--default:hover, button--outline:hover, button--alert:hover, button--warning:hover, button--success:hover, .btn--warning--outline:hover {
  background: #fff3e5;
}
button:active, button--default:active, button--outline:active, button--alert:active, button--warning:active, button--success:active, .btn--warning--outline:active {
  background: #ffe7cc;
}
button, button--default, button--outline, button--alert, button--warning, button--success, .btn--success {
  background: #00C55D;
  border: 1px solid #00C55D;
}
button:hover, button--default:hover, button--outline:hover, button--alert:hover, button--warning:hover, button--success:hover, .btn--success:hover {
  background: #00e46c;
}
button:active, button--default:active, button--outline:active, button--alert:active, button--warning:active, button--success:active, .btn--success:active {
  background: #00a64e;
}
button, button--default, button--outline, button--alert, button--warning, button--success, .btn--success--outline {
  border-color: #00C55D;
  color: #00C55D;
  background: white;
}
button:hover, button--default:hover, button--outline:hover, button--alert:hover, button--warning:hover, button--success:hover, .btn--success--outline:hover {
  background: #e5fff2;
}
button:active, button--default:active, button--outline:active, button--alert:active, button--warning:active, button--success:active, .btn--success--outline:active {
  background: #ccffe4;
}
button--small, .btn--small {
  font-size: 12px;
  padding: 6px 12px;
}
button--regular, .btn--regular {
  font-size: 14px;
  padding: 7px 14px;
}
button--medium, .btn--medium {
  font-size: 18px;
  padding: 9px 18px;
}
button--large, .btn--large {
  font-size: 22px;
  padding: 11px 22px;
}

SassMeister-rendered.html

<input/>
<button class="btn--default btn--small">Button</button>
<button class="btn--default--outline btn--small">Button</button>
<br>
<button class="btn--default btn--regular">Button</button>
<button class="btn--default--outline btn--regular">Button</button>
<br>
<button class="btn--default btn--medium">Button</button>
<button class="btn--default--outline btn--medium">Button</button>
<br>
<button class="btn--default btn--large">Button</button>
<button class="btn--default--outline btn--large">Button</button>
<br><br>

<button class="btn--alert btn--small">Button</button>
<button class="btn--alert--outline btn--small">Button</button>
<br>
<button class="btn--alert btn--regular">Button</button>
<button class="btn--alert--outline btn--regular">Button</button>
<br>
<button class="btn--alert btn--medium">Button</button>
<button class="btn--alert--outline btn--medium">Button</button>
<br>
<button class="btn--alert btn--large">Button</button>
<button class="btn--alert--outline btn--large">Button</button>
<br><br>

<button class="btn--warning btn--small">Button</button>
<button class="btn--warning--outline btn--small">Button</button>
<br>
<button class="btn--warning btn--regular">Button</button>
<button class="btn--warning--outline btn--regular">Button</button>
<br>
<button class="btn--warning btn--medium">Button</button>
<button class="btn--warning--outline btn--medium">Button</button>
<br>
<button class="btn--warning btn--large">Button</button>
<button class="btn--warning--outline btn--large">Button</button>
<br><br>

<button class="btn--success btn--small">Button</button>
<button class="btn--success--outline btn--small">Button</button>
<br>
<button class="btn--success btn--regular">Button</button>
<button class="btn--success--outline btn--regular">Button</button>
<br>
<button class="btn--success btn--medium">Button</button>
<button class="btn--success--outline btn--medium">Button</button>
<br>
<button class="btn--success btn--large">Button</button>
<button class="btn--success--outline btn--large">Button</button>
<br><br>