Sass Button Mixin

browserslist

> 1%
last 2 versions

SassMeister-input.scss

// ----
// libsass (v3.5.0.beta.2)
// ----

$btn-themes: (
    primary: (
        bgColor: #ef6c29,
        border: #333,
        color: #fff,
        hover: darken 15%,
    ),
    secondary: (
        bgColor: transparent,
        border: #ef6c29,
        color: #ef6c29,
        hover: #d7ccc8,
    ),
    tertiary: (
        bgColor: transparent,
        border: #c0e834,
        color: #c0e834,
        hover: #fff,
    )
);
$btn-name: 'button';

%btn {
    font: 16px/1 Lato;
    padding: 5px 10px;
    margin-right: 10px;
    
    &:disabled, &.#{$btn-name}--disabled {
        opacity: 0.5;
    }
}
@mixin make-btn($theme: 'primary') {
    $theme: map-get($btn-themes, $theme);
    $bgColor: map-get($theme, 'bgColor');
    
    @extend %btn;
    background-color: $bgColor;
    color: map-get($theme, 'color');
    @if map-has-key($theme, 'border') {
        border: 1px solid map-get($theme, border);
    }
    @content;
    @if (map-has-key($theme, 'hover')) {
        $hover: map-get($theme, 'hover');
        &:hover {
          @if (length($hover) == 2) {
            background-color: call(nth($hover, 1), $bgColor, nth($hover, 2));
          } @else {
            background-color: $hover;
          }
        }
    }
    &:disabled, &.#{$btn-name}--disabled {
        background-color: $bgColor;
    }
}

.#{$btn-name} {
    
    &--save {
        @include make-btn();
    }
    &--cancel {
        @include make-btn($theme: 'secondary');
    }
}
.foo-form {
    margin-top: 20px;
    
    &__submit {
        @include make-btn();
    }
}

SassMeister-output.css

.button--save, .button--cancel, .foo-form__submit {
  font: 16px/1 Lato;
  padding: 5px 10px;
  margin-right: 10px;
}

.button--save:disabled, .button--cancel:disabled, .foo-form__submit:disabled, .button--disabled.button--save, .button--disabled.button--cancel, .button--disabled.foo-form__submit {
  opacity: 0.5;
}

.button--save {
  background-color: #ef6c29;
  color: #fff;
  border: 1px solid #333;
}

.button--save:hover {
  background-color: #bd490e;
}

.button--save:disabled, .button--save.button--disabled {
  background-color: #ef6c29;
}

.button--cancel {
  background-color: transparent;
  color: #ef6c29;
  border: 1px solid #ef6c29;
}

.button--cancel:hover {
  background-color: #d7ccc8;
}

.button--cancel:disabled, .button--cancel.button--disabled {
  background-color: transparent;
}

.foo-form {
  margin-top: 20px;
}

.foo-form__submit {
  background-color: #ef6c29;
  color: #fff;
  border: 1px solid #333;
}

.foo-form__submit:hover {
  background-color: #bd490e;
}

.foo-form__submit:disabled, .foo-form__submit.button--disabled {
  background-color: #ef6c29;
}