Cacher is the code snippet organizer for pro developers

<div class="brand-red">I'm red!</div>
<div class="brand-blue">I'm blue!</div>
<div class="brand-orange">I'm orange!</div>
<div class="brand-yellow">I'm yellow!</div>

div {
  padding: .5em;
  margin: 1em auto;
  font-weight: bold; }

.brand-red {
  color: red;
  lightness: 50%;
  border: 1em solid #ff4040;
  border-bottom-color: #ff3333; }

.brand-blue {
  color: blue;
  lightness: 50%;
  border: 1em solid #4040ff;
  border-bottom-color: #3333ff; }

.brand-orange {
  color: orange;
  lightness: 50%;
  border: 1em solid #ffbc40;
  border-bottom-color: #ffb733; }

.brand-yellow {
  color: yellow;
  lightness: 50%;
  border: 1em solid #ffff40;
  border-bottom-color: #ffff33; }

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

$colors: (
  brand-red: red,
  brand-blue: blue,
  brand-orange: orange,
  brand-yellow: yellow
);

div {
  padding: .5em;
  margin: 1em auto;
  font-weight: bold;
}

@each $label, $value in $colors {
  .#{$label} {
    color: $value;
    $lv: lightness($value);
    lightness: lightness($value);
    border: 1em solid lighten($value, $lv*.25);
    border-bottom-color: lighten($value, max(lightness($value) * 1.2 - lightness($value), 10%));
  }
}

.brand-red I'm red!
.brand-blue I'm blue!
.brand-orange I'm orange!
.brand-yellow I'm yellow!