Generated by SassMeister.com.

SassMeister-input-HTML.html

<p>Some text won't hurt anybody</p>

<button class="btn btn--default btn--small">Button</button>
<button class="btn btn--default-outline btn--small">Button</button>
<br>

<button class="btn btn--default btn--regular">Button</button>
<button class="btn btn--default-outline btn--regular">Button</button>
<br>

<button class="btn btn--default btn--medium">Button</button>
<button class="btn btn--default-outline btn--medium">Button</button>
<br>

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

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

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

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

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

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

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

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

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

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

SassMeister-input.scss

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

/*------------------------------------*\
  VARIABLE
\*------------------------------------*/
$UI_sizing_ratio: 1.2;

$UI_size: (
  tiny 1 / $UI_sizing_ratio / $UI_sizing_ratio,
  small 1 / $UI_sizing_ratio,
  regular 1, 
  medium 1 * $UI_sizing_ratio, 
  large 1 * $UI_sizing_ratio * $UI_sizing_ratio
);

$UI_state: (
  default #73C4F2,
  warning #FFAA4A,
  alert #F51F21,
  success #00C55D
);

$base-font-size: 14px;
$base-line-height: 1.6;

$base-radius: 3px;
$button-radius: $base-radius;
$form-radius: $base-radius;


/*------------------------------------*\
  BASE
\*------------------------------------*/
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

html, body {
  font-family: DIN;
  font-weight: regular;
  font-size: $base-font-size;
  line-height: $base-line-height;
}

button, input, optgroup, select, textarea {
  margin: 0;
  font: inherit;
  color: inherit;
  line-height: normal;
}


/*------------------------------------*\
  MIXIN
\*------------------------------------*/
@function strip-unit($num) {
  @return $num / ($num * 0 + 1);
}

@mixin rem($property, $values...) {
  $max: length($values);
  $pxValues: '';
  $remValues: '';

  @for $i from 1 through $max {
    $value: strip-unit(nth($values, $i));
    $pxValues: #{$pxValues + $value * $base-font-size};

    @if $i < $max {
      $pxValues: #{$pxValues + " "};
    }
  } 

  @for $i from 1 through $max {
    $value: strip-unit(nth($values, $i));
    $remValues: #{$remValues + $value}rem;

    @if $i < $max {
      $remValues: #{$remValues + " "};
    }
  } 

  #{$property}: $pxValues; 
  #{$property}: $remValues;
}

@mixin mm($modifier, $extend-modifier: true) {
  @if $extend-modifier== false {
    $len: str-length(#{&}); 
    $parent: str-slice(#{&}, 2, $len);
    @at-root [class^="#{$parent}"][class*="--#{$modifier}"] {
        @extend .#{$parent};
        @content;
    }
  } @else { 
    @at-root {
      $selector: nth(&, 1);
      $direct-parent: nth($selector, length($selector));
      #{$direct-parent}--#{$modifier} { @extend #{$direct-parent}; }
      #{&}--#{$modifier} { @content; }
    }
  }
}


/*------------------------------------*\
  BUTTON - mixin
\*------------------------------------*/
@mixin button ($colour) {
  margin-bottom: 3px;
  $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); }
}

@mixin button-outline($colour) {
  $colour-lightness: lightness($colour);
  border: 1px solid $colour;
  color: $colour;
  background: white;
  &:hover { background: lighten($colour, 95 - $colour-lightness); }
  &:active { background: lighten($colour, 90 - $colour-lightness); }
}


/*------------------------------------*\
  BUTTON - style
\*------------------------------------*/
.btn {
  border-radius: $button-radius;
  color: white;
  cursor: pointer;

  @include mm('full-width') {
    width: 100%;
  }
  
  @each $state in $UI_state {
    $temp-value: nth($state, 2);
    @include mm(nth($state, 1)){
      @include button($temp-value);
    }
    
    @include mm(nth($state, 1) + "-outline"){
      @include button-outline($temp-value);
    }
    
    
  }

  @each $size in $UI_size {
    $temp-value: nth($size, 2);
    @include mm(nth($size, 1)) {
      @include rem(font-size, $temp-value);
      @include rem(padding, $temp-value/4, $temp-value);
    }
  }
}

/*------------------------------------*\
  INPUT - mixin
\*------------------------------------*/
@mixin input($colour) {
	border-color: $colour;
  color: $colour;
  &:focus { border-color: $colour;}
}

/*------------------------------------*\
  INPUT - style
\*------------------------------------*/
.input {
  border-radius: $form-radius;
  outline: 0;
  border: 1px solid #eee;
  
  &:focus {
    border-color: #73C4F2;
  }
  
  @each $state in $UI_state {
    $temp-value: nth($state, 2);
    @include mm(nth($state, 1)) {
      @include input($temp-value);
    }
  }
  @each $size in $UI_size {
    $temp-value: nth($size, 2);
    @include mm(nth($size, 1)) {
      @include rem(font-size, $temp-value);
      @include rem(padding, $temp-value/4, $temp-value/2);
    }
  }
}

SassMeister-output.css

/*------------------------------------*\
  VARIABLE
\*------------------------------------*/
/*------------------------------------*\
  BASE
\*------------------------------------*/
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

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

button, input, optgroup, select, textarea {
  margin: 0;
  font: inherit;
  color: inherit;
  line-height: normal;
}

/*------------------------------------*\
  MIXIN
\*------------------------------------*/
/*------------------------------------*\
  BUTTON - mixin
\*------------------------------------*/
/*------------------------------------*\
  BUTTON - style
\*------------------------------------*/
.btn, .btn--full-width, .btn--default, .btn--default-outline, .btn--warning, .btn--warning-outline, .btn--alert, .btn--alert-outline, .btn--success, .btn--success-outline, .btn--tiny, .btn--small, .btn--regular, .btn--medium, .btn--large {
  border-radius: 3px;
  color: white;
  cursor: pointer;
}
.btn--full-width {
  width: 100%;
}
.btn--default {
  margin-bottom: 3px;
  background: #73C4F2;
  border: 1px solid #73C4F2;
}
.btn--default:hover {
  background: #81caf3;
}
.btn--default:active {
  background: #65bef1;
}
.btn--default-outline {
  border: 1px solid #73C4F2;
  color: #73C4F2;
  background: white;
}
.btn--default-outline:hover {
  background: #e8f5fd;
}
.btn--default-outline:active {
  background: #d0ebfb;
}
.btn--warning {
  margin-bottom: 3px;
  background: #FFAA4A;
  border: 1px solid #FFAA4A;
}
.btn--warning:hover {
  background: #ffb35c;
}
.btn--warning:active {
  background: #ffa238;
}
.btn--warning-outline {
  border: 1px solid #FFAA4A;
  color: #FFAA4A;
  background: white;
}
.btn--warning-outline:hover {
  background: #fff3e5;
}
.btn--warning-outline:active {
  background: #ffe7cc;
}
.btn--alert {
  margin-bottom: 3px;
  background: #F51F21;
  border: 1px solid #F51F21;
}
.btn--alert:hover {
  background: #f63537;
}
.btn--alert:active {
  background: #f20b0d;
}
.btn--alert-outline {
  border: 1px solid #F51F21;
  color: #F51F21;
  background: white;
}
.btn--alert-outline:hover {
  background: #fee7e7;
}
.btn--alert-outline:active {
  background: #fdcecf;
}
.btn--success {
  margin-bottom: 3px;
  background: #00C55D;
  border: 1px solid #00C55D;
}
.btn--success:hover {
  background: #00e46c;
}
.btn--success:active {
  background: #00a64e;
}
.btn--success-outline {
  border: 1px solid #00C55D;
  color: #00C55D;
  background: white;
}
.btn--success-outline:hover {
  background: #e5fff2;
}
.btn--success-outline:active {
  background: #ccffe4;
}
.btn--tiny {
  font-size: 9.72222px;
  font-size: 0.69444rem;
  padding: 2.43056px 9.72222px;
  padding: 0.17361rem 0.69444rem;
}
.btn--small {
  font-size: 11.66667px;
  font-size: 0.83333rem;
  padding: 2.91667px 11.66667px;
  padding: 0.20833rem 0.83333rem;
}
.btn--regular {
  font-size: 14px;
  font-size: 1rem;
  padding: 3.5px 14px;
  padding: 0.25rem 1rem;
}
.btn--medium {
  font-size: 16.8px;
  font-size: 1.2rem;
  padding: 4.2px 16.8px;
  padding: 0.3rem 1.2rem;
}
.btn--large {
  font-size: 20.16px;
  font-size: 1.44rem;
  padding: 5.04px 20.16px;
  padding: 0.36rem 1.44rem;
}

/*------------------------------------*\
  INPUT - mixin
\*------------------------------------*/
/*------------------------------------*\
  INPUT - style
\*------------------------------------*/
.input, .input--default, .input--warning, .input--alert, .input--success, .input--tiny, .input--small, .input--regular, .input--medium, .input--large {
  border-radius: 3px;
  outline: 0;
  border: 1px solid #eee;
}
.input:focus, .input--default:focus, .input--warning:focus, .input--alert:focus, .input--success:focus, .input--tiny:focus, .input--small:focus, .input--regular:focus, .input--medium:focus, .input--large:focus {
  border-color: #73C4F2;
}
.input--default {
  border-color: #73C4F2;
  color: #73C4F2;
}
.input--default:focus {
  border-color: #73C4F2;
}
.input--warning {
  border-color: #FFAA4A;
  color: #FFAA4A;
}
.input--warning:focus {
  border-color: #FFAA4A;
}
.input--alert {
  border-color: #F51F21;
  color: #F51F21;
}
.input--alert:focus {
  border-color: #F51F21;
}
.input--success {
  border-color: #00C55D;
  color: #00C55D;
}
.input--success:focus {
  border-color: #00C55D;
}
.input--tiny {
  font-size: 9.72222px;
  font-size: 0.69444rem;
  padding: 2.43056px 4.86111px;
  padding: 0.17361rem 0.34722rem;
}
.input--small {
  font-size: 11.66667px;
  font-size: 0.83333rem;
  padding: 2.91667px 5.83333px;
  padding: 0.20833rem 0.41667rem;
}
.input--regular {
  font-size: 14px;
  font-size: 1rem;
  padding: 3.5px 7px;
  padding: 0.25rem 0.5rem;
}
.input--medium {
  font-size: 16.8px;
  font-size: 1.2rem;
  padding: 4.2px 8.4px;
  padding: 0.3rem 0.6rem;
}
.input--large {
  font-size: 20.16px;
  font-size: 1.44rem;
  padding: 5.04px 10.08px;
  padding: 0.36rem 0.72rem;
}

SassMeister-rendered.html

<p>Some text won't hurt anybody</p>

<button class="btn btn--default btn--small">Button</button>
<button class="btn btn--default-outline btn--small">Button</button>
<br>

<button class="btn btn--default btn--regular">Button</button>
<button class="btn btn--default-outline btn--regular">Button</button>
<br>

<button class="btn btn--default btn--medium">Button</button>
<button class="btn btn--default-outline btn--medium">Button</button>
<br>

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

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

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

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

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

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

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

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

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

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