<button>I'm a button</button>
@mixin primary-button {
background: teal;
border: none;
border-radius: 5px;
color: white;
padding: 10px;
cursor: pointer;
}
@mixin secondary-button {
background: red;
border: none;
border-radius: 10px;
color: black;
padding: 15px;
cursor: pointer;
}
@mixin button-swapper($buttonType: primary-button) {
@if $buttonType==primary-button {
@include primary-button();
}
@else if $buttonType==secondary-button {
@include secondary-button();
}
}
$button-type: secondary-button !default;
button {
@include button-swapper($button-type);
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.