Reputation: 4328
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
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