<div class="button button-purple">Click</div>
<div class="button button-purple">Click</div>
<div class="button button-purple">Click</div>
<div class="button button-purple">Click</div>
<div class="button button-purple">Click</div>
<div class="button button-purple">Click</div>
<div class="button button-purple">Click</div>

body {
  text-align: center;
  background-color: thistle;
  padding-top: 30px;
  letter-spacing: 1.3px;
}

//Basic button styling
.button {
  color: #fff;
  display: inline-block;
  padding: 8px 15px;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  margin: 20px auto;
  border-radius: 10px;
}

//Base Color
$violet-base: #A200FF;

//Mixin for Button Properties: Border + Background-Color
@mixin buttonColorProperties($color) {
  $border: adjust-hue($color, -6deg);
  background-color: $color; 
  border: 3px solid $border;
}

//for directive that cycles through buttons and changes the starting background-color
@for $i from 1 through 7 {
	.button-purple:nth-of-type(#{$i}) {
	  background-color: darken($violet-base, 5*$i);
	}
}

//Mixin that applies the above color properties 
@mixin buttonColors($baseColor) {
  @include buttonColorProperties($baseColor);

  &:hover {
    $base-hover: darken($baseColor, 30);

    @include buttonColorProperties($base-hover);
      transition: all 0.25s;
  }
}

//using the mixin & passing it the violet hex
.button-purple  {
  @include buttonColors($violet-base);
}