Skip to content

Instantly share code, notes, and snippets.

@jeffgolenski
Created February 12, 2015 21:55
Show Gist options
  • Save jeffgolenski/9f9270db3e0698a631c6 to your computer and use it in GitHub Desktop.
Save jeffgolenski/9f9270db3e0698a631c6 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<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>
// ----
// 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%);
}
}
.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;
}
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment