JSFiddle - React, Tailwind, and code Playground

adv sass two button test

by Travis Almand

HTML

<button class="btn-primary">primary button</button>
<button class="btn-secondary">secondary button</button>

SCSS

@function set-text-color($color) {
  @return if(lightness($color) > 50, #000, #fff);
}

$primary-color: #006e2e;
$secondary-color: complement($primary-color);

$btn-list: "primary" "secondary";

$btn-colors: (
  primary-color: set-text-color($primary-color),
  primary-background: $primary-color,
  primary-border: darken($primary-color, 10%),
  secondary-color: set-text-color($secondary-color),
  secondary-background: $secondary-color,
  secondary-border: darken($secondary-color, 10%),
);

%button-default {
  border: {
    radius: 7px;
    style: solid;
    width: 2px;
  };
  font-size: 16px;
  margin: 10px;
  padding: 10px;
  transition: all 0.25s;
}

@mixin build-btn {
  @each $btn in $btn-list {
    &.btn-#{$btn} {
      @extend %button-default;
      background-color: map-get($btn-colors, #{$btn}-background);
      border-color: map-get($btn-colors, #{$btn}-border);
      color: map-get($btn-colors, #{$btn}-color);
      cursor: pointer;
      
      &:hover {
        background-color: darken(map-get($btn-colors, #{$btn}-background), 5%);
      }
    }
  }
}

button {
  @include build-btn;
}