<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.