A Pen by Jason Hodges.

index.haml

<!-- Create a div for each line -->
%div.gradient
    - (0...100).each do |div|
        %div{:id => "line" + div.to_s}

Pure-Scss-Gradient.markdown

Pure Scss Gradient

Wondered if I could use scss to generate a gradient effect by looping through div's and adjusting the color incrementally. This is the result

A Pen by Jason Hodges on CodePen.

License.

style.scss

@import "compass";
/*Need 'lines' var*/
$lines: 100;
/*Starting color*/
$c: #006AFF;
/*Multiplyer-change this value to apply major adjustment to gradient*/
$m: 3;
/*Set the height of each line*/
$h: 8px;

/*Style each div*/
@while $lines > 0{
  #line#{$lines}{height: $h;
                  width: 100%;
                  background-color: $c + $lines*$m;
                  }
   
$lines: $lines - 1;
      }

.gradient{
  background-color: grey;
  margin: 0 auto;
  width: 800px;
  height: 600px;
}