Generated by SassMeister.com.

SassMeister-input-HTML.html

<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>

SassMeister-input.scss

// ----
// 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;
  
}

SassMeister-output.css

.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;
}

SassMeister-rendered.html

<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>