JSFiddle - React, Tailwind, and code Playground

adv sass two button test refactored

by Travis Almand

HTML

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

SCSS

$buttons:  
  ("btn-primary", #006e2e, darken(#006e2e, 10%), if(lightness(#006e2e) > 50, #000, #fff)), 
  ("btn-secondary", #6e0040, darken(#6e0040, 10%), if(lightness(#6e0040) > 50, #000, #fff))
;

%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 $buttons {
    &.#{nth($btn, 1)} {
      @extend %button-default;
      background-color: nth($btn, 2);
      border-color: nth($btn, 3);
      color: nth($btn, 4);
      cursor: pointer;
      
      &:hover {
        background-color: darken(nth($btn, 2), 5%);
      }
    }
  }
}

button {
  @include build-btn;
}