A Pen by ezos86.

index.html

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

Quick-Color-Gradients-with-Sass-(Scss).markdown

Quick Color Gradients with Sass (Scss)

Make a quick color gradient with scss.

A Pen by ezos86 on CodePen.

License.

style.scss

@import "compass/css3";
$color1:#000;

@for $i from 1 through 20 {
	div:nth-child(#{$i}) {
    background:lighten($color1,5%*$i);
    width:10%;
    float:left;
    height:100px;
    @if ($i<11){
      color:#f1f1f1;
    }
	}
  $color2: lighten($color1,5%*$i);
  div:nth-child(#{$i}):after {
    content:'#{$color2}';
    position:absolute;
    padding-left:8px;
    padding-top:30px;
  }
}