html SASS Button Mixin v0.2（SassMeister）

Posted 2021-05-11

<div>
<button class="btn btn--small btn--default">Small button</button>
<button class="btn btn--small btn--success">Small success button</button>
<button class="btn btn--small btn--warning">Small warning button</button>
<button class="btn btn--small btn--danger">Small danger button</button>
<button class="btn btn--small btn--info">Small info button</button>
</div>

<div>
<button class="btn btn--default">Medium button</button>
<button class="btn btn--success">Medium success button</button>
<button class="btn btn--warning">Medium warning button</button>
<button class="btn btn--danger">Medium danger button</button>
<button class="btn btn--info">Medium info button</button>
</div>

<div>
<button class="btn btn--large btn--default">Large button</button>
<button class="btn btn--large btn--success">Large success button</button>
<button class="btn btn--large btn--warning">Large warning button</button>
<button class="btn btn--large btn--danger">Large danger button</button>
<button class="btn btn--large btn--info">Large info button</button>
</div>

<button class="btn btn--default btn--bold">Bold button</button>
<button class="btn btn--default btn--upper">Uppercase button</button>

<button class="btn btn--default btn--block">Block button</button>

.btn {
  display: inline-block;
  padding: .5em;
  margin-bottom: 0;
  font-weight: normal;
  border-radius: .15em;
  border: 1px solid transparent;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  font-size: 110%;
  white-space: nowrap;
  color: #fff;
  transition: background .15s;
  box-shadow: 0 1px 2px black(0.1), inset 0 1px 0 white(0.15), inset 0 -1px 0 black(0.15);
}
.btn--large {
  font-size: 132%;
}
.btn--small {
  font-size: 91.66667%;
}
.btn--bold {
  font-weight: bold;
}
.btn--block {
  display: block;
  width: 100%;
}
.btn--default {
  background-color: #7f8c8d;
  border-color: #727f80;
}
.btn--default:hover, .btn--default:active {
  background: #727f80;
}
.btn--success {
  background-color: #5cb85c;
  border-color: #4cae4c;
}
.btn--success:hover, .btn--success:active {
  background: #4cae4c;
}
.btn--danger {
  background-color: #d9534f;
  border-color: #d43f3a;
}
.btn--danger:hover, .btn--danger:active {
  background: #d43f3a;
}
.btn--warning {
  background-color: #f0ad4e;
  border-color: #eea236;
}
.btn--warning:hover, .btn--warning:active {
  background: #eea236;
}
.btn--info {
  background-color: #5bc0de;
  border-color: #46b8da;
}
.btn--info:hover, .btn--info:active {
  background: #46b8da;
}

body {
  font-size: 110%;
  padding: 1em;
}

.btn {
  margin-bottom: 1em;
}

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

// Configuration
$font-size-base: 110%;
$btn-font-weight: normal;
$btn-name: 'btn' !default;
$btn-hover: darken 5% !default;
$btn-border:  darken 5% !default; // Set to false for no border
$btn-size-ratio: 1.2 !default;
$btn-schemes: (
  default: #7f8c8d,
  success: #5cb85c,
  danger:  #d9534f,
  warning: #f0ad4e,
  info:    #5bc0de
) !default;

// Color helper
// 1. Background-color
// 2. On hover
// 3. Border-color
@mixin button-color($color) {
  $everything-okay: true;
  
  // Making sure $color is a color
  @if type-of($color) != color {
    @warn "`#{$color}` is not a color for `button-color`";
    $everything-okay: false;
  }
  
  // Making sure $btn-hover and $btn-border are 2 items long
  @if length($btn-hover) != 2
   or length($btn-border) != 2 {
    @warn "Both `$btn-hover` and `$btn-border` should be two items long for `button-color`.";
    $everything-okay: false;  
  }
  
  // Making sure first items from $btn-hover and $btn-border are valid functions
  @if not function-exists(nth($btn-hover, 1))
   or not function-exists(nth($btn-border, 1)) {
    @warn "Either `#{nth($btn-hover, 1)}` or `#{nth($btn-border, 1)}` is not a valid function for `button-color`.";
    $everything-okay: false;
  }
  
  // Making sure second items from $btn-hover and $btn-border are percentages
  @if type-of(nth($btn-hover, 2)) != number
   or type-of(nth($btn-border, 2)) != number {
    @warn "Either `#{nth($btn-hover, 2)}` or `#{nth($btn-border, 2)}` is not a valid percentage for `button-color`.";
    $everything-okay: false;
  }
  
  // If there is no mistake
  @if $everything-okay == true {
    background-color: $color; // 1
  
    &:hover,
    &:active { // 2
      background: call(nth($btn-hover, 1), $color, nth($btn-hover, 2));
    }
  
    @if $btn-border != false { // 3
      border-color: call(nth($btn-border, 1), $color, nth($btn-border, 2));
    }
  }
}

// Default class
// 1. Large modifier
// 2. Small modifier
// 3. Bold modifier
// 4. Block modifier
// 5. Color themes modifier
.#{$btn-name} {
  // Default styles
  display: inline-block;
  padding: .5em;
  margin-bottom: 0;
  font-weight: $btn-font-weight;
  border-radius: .15em;
  border: 1px solid transparent;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
  font-size: $font-size-base;
  white-space: nowrap;
  color: #fff;
  transition: background .15s;
  //box-shadow: inset 0 1px rgba(255, 255, 255, .2);
  box-shadow: 0 1px 2px black(0.1), inset 0 1px 0 white(0.15), inset 0 -1px 0 black(0.15);
  
  // Modifiers
  &--large { // 1
    font-size: $font-size-base * $btn-size-ratio;
  }
  
  &--small { // 2
    font-size: $font-size-base / $btn-size-ratio;
  }

  &--bold { // 3
    font-weight: bold;
  }
  
  &--block { // 4
    display: block;
    width: 100%;
  }
  
  @each $key, $value in $btn-schemes { // 5
    &--#{$key} {
      @include button-color($value);
    }
  }
}

// Demo
body {
  font-size: $font-size-base;
  padding: 1em;
}

.#{$btn-name} {
  margin-bottom: 1em;
}

<div>
<button class="btn btn--small btn--default">Small button</button>
<button class="btn btn--small btn--success">Small success button</button>
<button class="btn btn--small btn--warning">Small warning button</button>
<button class="btn btn--small btn--danger">Small danger button</button>
<button class="btn btn--small btn--info">Small info button</button>
</div>

<div>
<button class="btn btn--default">Medium button</button>
<button class="btn btn--success">Medium success button</button>
<button class="btn btn--warning">Medium warning button</button>
<button class="btn btn--danger">Medium danger button</button>
<button class="btn btn--info">Medium info button</button>
</div>

<div>
<button class="btn btn--large btn--default">Large button</button>
<button class="btn btn--large btn--success">Large success button</button>
<button class="btn btn--large btn--warning">Large warning button</button>
<button class="btn btn--large btn--danger">Large danger button</button>
<button class="btn btn--large btn--info">Large info button</button>
</div>

<button class="btn btn--default btn--bold">Bold button</button>
<button class="btn btn--default btn--upper">Uppercase button</button>

<button class="btn btn--default btn--block">Block button</button>