CODEWITHSUNDEEP
csssass
pertrai1
pertrai1

Reputation: 4328

Sass mixin getting redundant

is there a better way of solving this problem. My mixin include is starting to get repetitive and don't know if there is a better way to do this:

@mixin button-type($name, $bgColor, $borderColor, $color, $hoverBg, $hoverColor) {
 .btn-#{$name} {
    background-color : $bgColor;
    border-color     : $borderColor;
    color            : $color;

    &:hover {
        background-color : $hoverBg;
        border-color     : $borderColor;
        box-shadow       : 0 0 5px rgba(0, 0, 0, .5);
        color            : $hoverColor;
    }
  }
}

@include button-type('warning', #fff, $dark-blue, $black, $dark-blue, #fff);
@include button-type('primary', #fff, $dark-blue, $black, $dark-blue, #fff);
@include button-type('active', #fff, $dark-blue, $black, $dark-blue, #fff);

Upvotes: 1

Views: 77

Answers (1)

neatnick
neatnick

Reputation: 1508

You could just make another mixin which calls your mixin with hard coded values for the desired properties:

@mixin dark-blue-button-type($name) {
    @include button-type($name, #fff, $dark-blue, $black, $dark-blue, #fff);
}

So calling it would be:

@include dark-blue-button-type('warning');
@include dark-blue-button-type('primary');
@include dark-blue-button-type('active');

Upvotes: 2

Related Questions