Cacher is the code snippet organizer for pro developers

<div class="test"></div>
<div class="test lt"></div>
<div class="test lter"></div>
<br />
<div class="test"></div>
<div class="test dk"></div>
<div class="test dker"></div>
<br />
<div class="test primary"></div>
<div class="test success"></div>
<div class="test info"></div>
<div class="test warning"></div>
<div class="test danger"></div>

.test {
  display: inline-block;
  width: 100px;
  height: 50px;
  background: blue;
}
.test.lt, .test .lt {
  background: #3333ff;
}
.test.lter, .test .lter {
  background: #4d4dff;
}
.test.dk, .test .dk {
  background: #0000cc;
}
.test.dker, .test .dker {
  background: #0000b3;
}
.test.primary {
  background: #428bca;
}
.test.success {
  background: #5cb85c;
}
.test.info {
  background: #5bc0de;
}
.test.warning {
  background: #f0ad4e;
}
.test.danger {
  background: #d9534f;
}

// ----
// Sass (v3.3.5)
// Compass (v1.0.0.alpha.18)
// ----

$colors: (
  primary:  #428bca,
  success:  #5cb85c,
  info:     #5bc0de,
  warning:  #f0ad4e,
  danger:   #d9534f
);

@mixin percentage-color-variant($property, $base-color) {
  $lighten-percentages: (lt: 10%, lter: 15%);
  $darken-percentages: (dk: 10%, dker: 15%);

  #{$property}: $base-color;

  @each $variation in map-keys($lighten-percentages) {
    &.#{$variation}, .#{$variation} {
      #{$property}: lighten($base-color, map-get($lighten-percentages, $variation));
    }
  }

  @each $variation in map-keys($darken-percentages) {
    &.#{$variation}, .#{$variation} {
      #{$property}: darken($base-color, map-get($darken-percentages, $variation));
    }
  }
}

@mixin color-variant($property) {
  @each $variation in map-keys($colors) {
    &.#{$variation} {
      #{$property}: map-get($colors, $variation);
    }
  }
}

.test {
  display: inline-block;
  width: 100px;
  height: 50px;
  @include percentage-color-variant(background, blue);
  @include color-variant(background);
}

<div class="test"></div>
<div class="test lt"></div>
<div class="test lter"></div>
<br />
<div class="test"></div>
<div class="test dk"></div>
<div class="test dker"></div>
<br />
<div class="test primary"></div>
<div class="test success"></div>
<div class="test info"></div>
<div class="test warning"></div>
<div class="test danger"></div>