Generated by SassMeister.com.

SassMeister-input-HTML.html

<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>




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

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

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

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

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

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

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

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

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

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

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

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

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

SassMeister-input.scss

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

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

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

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

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;
}

@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*16}px;

    @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;
}


// Multiple modifier
@mixin mm($modifier, $extend-modifier: true) {
  @if $extend-modifier== true {
    $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; }
    }
  }
}


$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
);


/*------------------------------------*\
  BUTTON - mixin
\*------------------------------------*/
@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 mm('outline') {
  &[class*="--outline"] {
    $colour-lightness: lightness($colour);
    background: white;
    color: $colour;
    &: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 {
    @include mm(nth($state, 1)){
      $temp-value: nth($state, 2);
      @include button($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;
  }

  @include mm('alert') {
    border-color: #F51F21;
    color: #F51F21;
    &:focus { border-color: #F51F21;}
  }
  
  @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

html {
  box-sizing: border-box;
}

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

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;
}

/*------------------------------------*\
  BUTTON - mixin
\*------------------------------------*/
/*------------------------------------*\
  BUTTON - style
\*------------------------------------*/
.btn, [class^="btn"][class*="--full-width"], [class^="btn"][class*="--default"], [class^="btn"][class*="--warning"], [class^="btn"][class*="--alert"], [class^="btn"][class*="--success"], [class^="btn"][class*="--tiny"], [class^="btn"][class*="--small"], [class^="btn"][class*="--regular"], [class^="btn"][class*="--medium"], [class^="btn"][class*="--large"] {
  border-radius: 3px;
  color: white;
  cursor: pointer;
}
[class^="btn"][class*="--full-width"] {
  width: 100%;
}
[class^="btn"][class*="--default"] {
  background: #73C4F2;
  border: 1px solid #73C4F2;
}
[class^="btn"][class*="--default"]:hover {
  background: #81caf3;
}
[class^="btn"][class*="--default"]:active {
  background: #65bef1;
}
[class^="btn"][class*="--default"][class*="--outline"] {
  background: white;
  color: #73C4F2;
}
[class^="btn"][class*="--default"][class*="--outline"]:hover {
  background: #e8f5fd;
}
[class^="btn"][class*="--default"][class*="--outline"]:active {
  background: #d0ebfb;
}
[class^="btn"][class*="--warning"] {
  background: #FFAA4A;
  border: 1px solid #FFAA4A;
}
[class^="btn"][class*="--warning"]:hover {
  background: #ffb35c;
}
[class^="btn"][class*="--warning"]:active {
  background: #ffa238;
}
[class^="btn"][class*="--warning"][class*="--outline"] {
  background: white;
  color: #FFAA4A;
}
[class^="btn"][class*="--warning"][class*="--outline"]:hover {
  background: #fff3e5;
}
[class^="btn"][class*="--warning"][class*="--outline"]:active {
  background: #ffe7cc;
}
[class^="btn"][class*="--alert"] {
  background: #F51F21;
  border: 1px solid #F51F21;
}
[class^="btn"][class*="--alert"]:hover {
  background: #f63537;
}
[class^="btn"][class*="--alert"]:active {
  background: #f20b0d;
}
[class^="btn"][class*="--alert"][class*="--outline"] {
  background: white;
  color: #F51F21;
}
[class^="btn"][class*="--alert"][class*="--outline"]:hover {
  background: #fee7e7;
}
[class^="btn"][class*="--alert"][class*="--outline"]:active {
  background: #fdcecf;
}
[class^="btn"][class*="--success"] {
  background: #00C55D;
  border: 1px solid #00C55D;
}
[class^="btn"][class*="--success"]:hover {
  background: #00e46c;
}
[class^="btn"][class*="--success"]:active {
  background: #00a64e;
}
[class^="btn"][class*="--success"][class*="--outline"] {
  background: white;
  color: #00C55D;
}
[class^="btn"][class*="--success"][class*="--outline"]:hover {
  background: #e5fff2;
}
[class^="btn"][class*="--success"][class*="--outline"]:active {
  background: #ccffe4;
}
[class^="btn"][class*="--tiny"] {
  font-size: 11.11111px;
  font-size: 0.69444rem;
  padding: 2.77778px 11.11111px;
  padding: 0.17361rem 0.69444rem;
}
[class^="btn"][class*="--small"] {
  font-size: 13.33333px;
  font-size: 0.83333rem;
  padding: 3.33333px 13.33333px;
  padding: 0.20833rem 0.83333rem;
}
[class^="btn"][class*="--regular"] {
  font-size: 16px;
  font-size: 1rem;
  padding: 4px 16px;
  padding: 0.25rem 1rem;
}
[class^="btn"][class*="--medium"] {
  font-size: 19.2px;
  font-size: 1.2rem;
  padding: 4.8px 19.2px;
  padding: 0.3rem 1.2rem;
}
[class^="btn"][class*="--large"] {
  font-size: 23.04px;
  font-size: 1.44rem;
  padding: 5.76px 23.04px;
  padding: 0.36rem 1.44rem;
}

/*------------------------------------*\
  INPUT - mixin
\*------------------------------------*/
/*------------------------------------*\
  INPUT - style
\*------------------------------------*/
.input, [class^="input"][class*="--alert"], [class^="input"][class*="--default"], [class^="input"][class*="--warning"], [class^="input"][class*="--success"], [class^="input"][class*="--tiny"], [class^="input"][class*="--small"], [class^="input"][class*="--regular"], [class^="input"][class*="--medium"], [class^="input"][class*="--large"] {
  border-radius: 3px;
  outline: 0;
  border: 1px solid #eee;
}
.input:focus, [class^="input"][class*="--alert"]:focus, [class^="input"][class*="--default"]:focus, [class^="input"][class*="--warning"]:focus, [class^="input"][class*="--success"]:focus, [class^="input"][class*="--tiny"]:focus, [class^="input"][class*="--small"]:focus, [class^="input"][class*="--regular"]:focus, [class^="input"][class*="--medium"]:focus, [class^="input"][class*="--large"]:focus {
  border-color: #73C4F2;
}
[class^="input"][class*="--alert"] {
  border-color: #F51F21;
  color: #F51F21;
}
[class^="input"][class*="--alert"]:focus {
  border-color: #F51F21;
}
[class^="input"][class*="--default"] {
  border-color: #73C4F2;
  color: #73C4F2;
}
[class^="input"][class*="--default"]:focus {
  border-color: #73C4F2;
}
[class^="input"][class*="--warning"] {
  border-color: #FFAA4A;
  color: #FFAA4A;
}
[class^="input"][class*="--warning"]:focus {
  border-color: #FFAA4A;
}
[class^="input"][class*="--alert"] {
  border-color: #F51F21;
  color: #F51F21;
}
[class^="input"][class*="--alert"]:focus {
  border-color: #F51F21;
}
[class^="input"][class*="--success"] {
  border-color: #00C55D;
  color: #00C55D;
}
[class^="input"][class*="--success"]:focus {
  border-color: #00C55D;
}
[class^="input"][class*="--tiny"] {
  font-size: 11.11111px;
  font-size: 0.69444rem;
  padding: 2.77778px 5.55556px;
  padding: 0.17361rem 0.34722rem;
}
[class^="input"][class*="--small"] {
  font-size: 13.33333px;
  font-size: 0.83333rem;
  padding: 3.33333px 6.66667px;
  padding: 0.20833rem 0.41667rem;
}
[class^="input"][class*="--regular"] {
  font-size: 16px;
  font-size: 1rem;
  padding: 4px 8px;
  padding: 0.25rem 0.5rem;
}
[class^="input"][class*="--medium"] {
  font-size: 19.2px;
  font-size: 1.2rem;
  padding: 4.8px 9.6px;
  padding: 0.3rem 0.6rem;
}
[class^="input"][class*="--large"] {
  font-size: 23.04px;
  font-size: 1.44rem;
  padding: 5.76px 11.52px;
  padding: 0.36rem 0.72rem;
}

SassMeister-rendered.html

<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>




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

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

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

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

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

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

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

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

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

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

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

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

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