Skip to content

Instantly share code, notes, and snippets.

@Colir
Created October 8, 2014 07:24
Show Gist options
  • Save Colir/07500ba575f027373556 to your computer and use it in GitHub Desktop.
Save Colir/07500ba575f027373556 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="holder">
<div class="color-1"></div>
<div class="color-2"></div>
<div class="color-3"></div>
<div class="color-4"></div>
<div class="color-5"></div>
</div>
// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----
@mixin block-color($color){
@for $i from 1 through 15 {
$pc : (100/15) * $i;
$modColor : lighten($color,$pc * 1%);
.color-#{$i}{
background-color:$modColor;
transition:all 0.15s linear;
&:hover{background-color: darken($modColor,10%);}
}
}
}
.holder{@include block-color(#1c4897);}
[class *="color-"]{
width:150px;height:150px;float:left;border:1px solid red;
background-color:#1c4897;
}
.holder .color-1 {
background-color: #2156b4;
transition: all 0.15s linear;
}
.holder .color-1:hover {
background-color: #194189;
}
.holder .color-2 {
background-color: #2763d0;
transition: all 0.15s linear;
}
.holder .color-2:hover {
background-color: #1f4fa5;
}
.holder .color-3 {
background-color: #3e76db;
transition: all 0.15s linear;
}
.holder .color-3:hover {
background-color: #245dc2;
}
.holder .color-4 {
background-color: #5b8ae0;
transition: all 0.15s linear;
}
.holder .color-4:hover {
background-color: #2f6cd9;
}
.holder .color-5 {
background-color: #779fe6;
transition: all 0.15s linear;
}
.holder .color-5:hover {
background-color: #4c80de;
}
.holder .color-6 {
background-color: #94b3eb;
transition: all 0.15s linear;
}
.holder .color-6:hover {
background-color: #6995e3;
}
.holder .color-7 {
background-color: #b1c7f0;
transition: all 0.15s linear;
}
.holder .color-7:hover {
background-color: #86a9e8;
}
.holder .color-8 {
background-color: #cddcf6;
transition: all 0.15s linear;
}
.holder .color-8:hover {
background-color: #a2bdee;
}
.holder .color-9 {
background-color: #eaf0fb;
transition: all 0.15s linear;
}
.holder .color-9:hover {
background-color: #bfd2f3;
}
.holder .color-10 {
background-color: white;
transition: all 0.15s linear;
}
.holder .color-10:hover {
background-color: #d4e1f7;
}
.holder .color-11 {
background-color: white;
transition: all 0.15s linear;
}
.holder .color-11:hover {
background-color: #d4e1f7;
}
.holder .color-12 {
background-color: white;
transition: all 0.15s linear;
}
.holder .color-12:hover {
background-color: #d4e1f7;
}
.holder .color-13 {
background-color: white;
transition: all 0.15s linear;
}
.holder .color-13:hover {
background-color: #d4e1f7;
}
.holder .color-14 {
background-color: white;
transition: all 0.15s linear;
}
.holder .color-14:hover {
background-color: #d4e1f7;
}
.holder .color-15 {
background-color: white;
transition: all 0.15s linear;
}
.holder .color-15:hover {
background-color: #d4e1f7;
}
[class*="color-"] {
width: 150px;
height: 150px;
float: left;
border: 1px solid red;
background-color: #1c4897;
}
<div class="holder">
<div class="color-1"></div>
<div class="color-2"></div>
<div class="color-3"></div>
<div class="color-4"></div>
<div class="color-5"></div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment