Generated by SassMeister.com.
<div class='green column'>
<p class='color-green'>$color-green;</p>
<p class='color-green-1'>$color-green-1;</p>
<p class='color-green-2'>$color-green-2;</p>
<p class='color-green-3'>$color-green-3;</p>
<p class='color-green-4'>$color-green-4;</p>
</div>
<div class='blue column'>
<p class='color-blue'>$color-blue;</p>
<p class='color-blue-1'>$color-blue-1;</p>
<p class='color-blue-2'>$color-blue-2;</p>
<p class='color-blue-3'>$color-blue-3;</p>
<p class='color-blue-4'>$color-blue-4;</p>
</div>
<div class='yellow column'>
<p class='color-yellow'>$color-yellow;</p>
<p class='color-yellow-1'>$color-yellow-1;</p>
<p class='color-yellow-2'>$color-yellow-2;</p>
<p class='color-yellow-3'>$color-yellow-3;</p>
<p class='color-yellow-4'>$color-yellow-4;</p>
</div>
<div class='red column'>
<p class='color-red'>$color-red;</p>
<p class='color-red-1'>$color-red-1;</p>
<p class='color-red-2'>$color-red-2;</p>
<p class='color-red-3'>$color-red-3;</p>
<p class='color-red-4'>$color-red-4;</p>
</div>
<div class='silver column'>
<p class='color-silver'>$color-silver;</p>
<p class='color-silver-1'>$color-silver-1;</p>
<p class='color-silver-2'>$color-silver-2;</p>
<p class='color-silver-3'>$color-silver-3;</p>
<p class='color-silver-4'>$color-silver-4;</p>
</div>
.color-green {
color: #2ecc71;
}
.color-green-1 {
color: #2db66c;
}
.color-green-2 {
color: #2da167;
}
.color-green-3 {
color: #2d8c62;
}
.color-green-4 {
color: #2c765d;
}
.color-blue {
color: #3498db;
}
.color-blue-1 {
color: #328ac6;
}
.color-blue-2 {
color: #317cb1;
}
.color-blue-3 {
color: #306f9c;
}
.color-blue-4 {
color: #2f6287;
}
.color-yellow {
color: #f1c40f;
}
.color-yellow-1 {
color: #d3af18;
}
.color-yellow-2 {
color: #b59b22;
}
.color-yellow-3 {
color: #98872c;
}
.color-yellow-4 {
color: #7a7336;
}
.color-red {
color: #e74c3c;
}
.color-red-1 {
color: #ca493f;
}
.color-red-2 {
color: #ae4742;
}
.color-red-3 {
color: #924545;
}
.color-red-4 {
color: #764348;
}
.color-silver {
color: #bdc3c7;
}
.color-silver-1 {
color: #a7afb5;
}
.color-silver-2 {
color: #919ba3;
}
.color-silver-3 {
color: #7b8791;
}
.color-silver-4 {
color: #66737f;
}
.column {
display: inline-block;
vertical-align: top;
margin: 1em;
font-size: 22px;
font-weight: bold;
}
[class*="color"] {
border-left: 2.6em solid currentColor;
padding-left: .25em;
margin: 0;
line-height: 1.6;
}
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
$colors: (
green: #2ecc71,
blue: #3498db,
yellow: #f1c40f,
red: #e74c3c,
silver: #bdc3c7
);
$dark-tint: #2c3e50;
$light-tint: #ecf0f1;
@each $name, $value in $colors {
.color-#{$name} {
color: $value;
@for $i from 1 through 4 {
&-#{$i} {
color: mix($dark-tint, $value, ($i * 15%));
}
}
}
}
.column {
display: inline-block;
vertical-align: top;
margin: 1em;
font-size: 22px;
font-weight: bold;
}
[class*="color"] {
border-left: 2.6em solid currentColor;
padding-left: .25em;
margin: 0;
line-height: 1.6;
}
- colors = ['green', 'blue', 'yellow', 'red', 'silver']
- (colors).each do |color|
%div{ :class => "#{color} column" }
%p{ :class => "color-#{color}"} $color-#{color};
- (1...5).each do |i|
%p{ :class => "color-#{color}-#{i}"} $color-#{color}-#{i};