<div class="wrapper">
  <div class="box active">Active</div>
  <div class="box visited">Visited</div>
  <div class="box disabled">Disabled</div>
</div>
@import url('https://fonts.googleapis.com/css?family=Montserrat');

@mixin flex($j:null, $a:null) {
  display: flex;
  justify-content: $j;
  align-items: $a;
}

body {
  @include flex(center, center);
  height: 100vh;
}

.wrapper {
  @include flex();
}

.box {
  @include flex(center, center);
  width: 100px;
  height: 100px;
  font-size: 12px;
  margin: 5px;  
  font-family: 'Heebo', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #333;
}

$list: (
  active #C86FF6, 
  disabled #BBB, 
  visited #47BFC1
);

@each $state, $background in $list {
  .#{$state} {
    background-color: $background;
    
    @if $state == active {
      color: white;
    }
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js