SCSS linear gradient effect - colors

Question

I have many spans that are one next to each other and I'd like to add some linear-gradient effect - so the first one has background-color: $a, the last one background-color: $b and the spans between the "transition color from $a to $b". If I'm not making any sense, this image will help you:
I tried with lighten(), but it only uses one color.
Here's the current SCSS:
$starting_color: #177DEF;
$ending_color: #2FF0D5;
$elements: 51;
#for $i from 0 to $elements {
span:nth-child(#{$i}) {
height: random(260) + px;
background-color: lighten($starting_color, $i);
}
}
Whole fiddle on Codepen
How can I create this "effect"? Possible with some step parameter (step count = all spans)

Answer 1

This is quite lengthy, but it works:
//$blue: #177DEF;
$firstR: 23;
$firstG: 239;
$firstB: 125;
$blue: rgb(23, 125, 239);
//$green: #2FF0D5;
$secondR: 47;
$secondG: 240;
$secondB: 213;
$green: rgb(47, 240, 213);
body{
background-color: #000;
}
#panel {
font-size: 0;
}
span {
font-size: 16px;
display: inline-block;
vertical-align: bottom;
width: 10px;
&:not(:first-of-type) {
margin-left: 2px;
}
}
$elements: 51;
$redDiv: ($firstR - $secondR) / $elements;
#if $redDiv < 0 {
$redDiv: $redDiv * -1
}
$greenDiv: ($firstG - $secondG) / $elements;
#if $greenDiv < 0 {
$greenDiv: $greenDiv * -1
}
$blueDiv: ($firstB - $secondB) / $elements;
#if $blueDiv < 0 {
$blueDiv: $blueDiv * -1
}
#for $i from 0 to $elements {
$redValue: $redDiv * $i;
$greenValue: $greenDiv * $i;
$blueValue: $blueDiv * $i;
span:nth-child(#{$i}) {
height: random(260) + px;
background-color: rgb($firstR + $redValue, $firstG + $greenValue, $firstB + $blueValue);
}
}
I converted the hexadecimal values to RGB here, then made separate variables for each red, green, blue value in both colors.
Subtract the second value from the first then divide by how many elements (this gives you the amount of change needed each iteration).
Make sure the values aren't negative with #if.
Calculate the change by multiplying by $i and then add/subtract that change depending upon which value was lesser (first or second). If first value is less then $first + $value, if second value is less then $first - $value.
This was the only part that needs to be changed depending on the colors, the rest will work for any RGB value.
Codepen: http://codepen.io/anon/pen/ezpmXJ