Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="block wpdarkblue"></div>
<div class="block wpdarkblue shade"></div>

<div class="block wpblue"></div>
<div class="block wpblue shade"></div>

<div class="block wpmedblue"></div>
<div class="block wpmedblue shade"></div>

<div class="block wplightblue"></div>
<div class="block wplightblue shade"></div>

SassMeister-input.scss

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

// WordPress.com Blues
$blue-wordpress: #0087be;
$blue-dark: #005082;
$blue-medium: #00aadc;
$blue-light: #78dcfa;


.block {
  height: 100px;
  width: 100px;
  border: 1px #ddd solid;
  display: inline-block;
}

.wpdarkblue {
  background-color: $blue-dark;
  &.shade {
    background-color: lighten($blue-dark, 5%);
  }
}

.wpblue {
  background-color: $blue-wordpress;
  &.shade {
    background-color: lighten($blue-wordpress, 5%);
  }
}

.wpmedblue {
  background-color: $blue-medium;
  &.shade {
    background-color: lighten($blue-medium, 5%);
  }
}

.wplightblue {
  background-color: $blue-light;
  &.shade {
    background-color: lighten($blue-light, 5%);
  }
}

SassMeister-output.css

.block {
  height: 100px;
  width: 100px;
  border: 1px #ddd solid;
  display: inline-block;
}

.wpdarkblue {
  background-color: #005082;
}
.wpdarkblue.shade {
  background-color: #00609b;
}

.wpblue {
  background-color: #0087be;
}
.wpblue.shade {
  background-color: #0099d8;
}

.wpmedblue {
  background-color: #00aadc;
}
.wpmedblue.shade {
  background-color: #00bef6;
}

.wplightblue {
  background-color: #78dcfa;
}
.wplightblue.shade {
  background-color: #91e2fb;
}

SassMeister-rendered.html

<div class="block wpdarkblue"></div>
<div class="block wpdarkblue shade"></div>

<div class="block wpblue"></div>
<div class="block wpblue shade"></div>

<div class="block wpmedblue"></div>
<div class="block wpmedblue shade"></div>

<div class="block wplightblue"></div>
<div class="block wplightblue shade"></div>