Generated by SassMeister.com.

buttons_with_themes.scss

// ----
// libsass (v3.3.2)
// ----

/// Button themes
$button-themes: (
    primary: (
        bgColor: blue,
        color: white
    ),
    link: (
        color: red
    )
);

/// build a button based on a theme from
/// $button-themes map
/// @param $name - button name
/// @param $theme [primary] - the theme to use from the map
@mixin make-button($theme: 'primary', $name: null) {
    @if map-has-key($button-themes, $theme) {
        $values: map-get($button-themes, $theme);
        background-color: map-get($values, bgColor);
        color: map-get($values, color);
    } @else {
        @warn "No theme named '#{$theme}' was found.";
    }
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    display: inline-block;
    text-decoration: none;
    padding: 12px 30px 12px;
    text-transform: lowercase;
    @content;
    
    &:hover {
        text-decoration: none;
    }
}

// usage
.my-button {
    @include make-button();
}
.my-other-button {
    @include make-button(link);
}
.another-button {
  @include make-button(secondary);
  position: absolute;
}

buttons_with_themes_output.css

.my-button {
  background-color: blue;
  color: white;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  display: inline-block;
  text-decoration: none;
  padding: 12px 30px 12px;
  text-transform: lowercase;
}

.my-button:hover {
  text-decoration: none;
}

.my-other-button {
  color: red;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  display: inline-block;
  text-decoration: none;
  padding: 12px 30px 12px;
  text-transform: lowercase;
}

.my-other-button:hover {
  text-decoration: none;
}

.another-button {
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  display: inline-block;
  text-decoration: none;
  padding: 12px 30px 12px;
  text-transform: lowercase;
  position: absolute;
}

.another-button:hover {
  text-decoration: none;
}