html SASS Button Mixin v0.1（SassMeister）

Posted 2021-05-11

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

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

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

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

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

.button {
  padding: .5em;
  margin-bottom: 1em;
  color: #fff;
  transition: background .15s;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.2);
  border-radius: .15em;
  border: 1px solid transparent;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  font-size: 110%;
}
.button--large {
  font-size: 132%;
}
.button--small {
  font-size: 91.66667%;
}
.button--bold {
  font-weight: bold;
}
.button--block {
  display: block;
  width: 100%;
}
.button--upper {
  text-transform: uppercase;
}
.button--default {
  background-color: #7f8c8d;
  border-color: #727f80;
}
.button--default:hover, .button--default:active {
  background: #727f80;
}
.button--success {
  background-color: #5cb85c;
  border-color: #4cae4c;
}
.button--success:hover, .button--success:active {
  background: #4cae4c;
}
.button--danger {
  background-color: #d9534f;
  border-color: #d43f3a;
}
.button--danger:hover, .button--danger:active {
  background: #d43f3a;
}
.button--warning {
  background-color: #f0ad4e;
  border-color: #eea236;
}
.button--warning:hover, .button--warning:active {
  background: #eea236;
}
.button--info {
  background-color: #5bc0de;
  border-color: #46b8da;
}
.button--info:hover, .button--info:active {
  background: #46b8da;
}

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

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

// Configuration
$font-size-base: 110%;
$btn-name: 'button' !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. Border or not border?
// 2. Large modifier
// 3. Small modifier
// 4. Bold modifier
// 5. Block modifier
// 6. Uppercase modifier
// 7. Color themes modifier
.#{$btn-name} {
  // Default styles
  padding: .5em;
  margin-bottom: 1em;
  color: #fff;
  transition: background .15s;
  box-shadow: inset 0 1px rgba(255, 255, 255, .2);
  border-radius: .15em;
  border: 1px solid transparent;
  //border: if($btn-border != false, 1px solid, none); // 1
  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;
  
  // Modifiers
  &--large { // 2
    font-size: $font-size-base * $btn-size-ratio;
  }
  
  &--small { // 3
    font-size: $font-size-base / $btn-size-ratio;
  }

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

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

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

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

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

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

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