SCSS линейного градиент эффект

Question

У меня есть много spans, которые являются одним рядом друг с другом, и я хотел бы добавить некоторые линейный градиент эффекта - поэтому первые из них имеют background-color: $a, последний background-color: $b и spans между «переходный цвет от $ a до $ b». Если я не делаю никакого смысла, этот образ поможет Вам:

Я попытался с lighten(), но он использует только один цвет.

Вот текущий 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

Как я могу создать этот "эффект"? Возможно с некоторыми step параметра (этап подсчета = все пролеты)

Answer 1

Это довольно длительный, но он работает:

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

Я преобразовал шестнадцатеричные значения RGB here, а затем сделал отдельные переменные для каждого красного, зеленого , синее значение в обоих цветах.

Вычитайте второе значение из первого, затем разделите на количество элементов (это дает вам количество изменений, необходимых для каждой итерации).

Убедитесь, что значения не являются отрицательными с помощью @if.

Рассчитать изменение путем умножения на $i, а затем добавить/вычесть это изменение в зависимости от того, какое значение было меньше (первое или второе). Если первое значение меньше $first + $value, если второе значение меньше $first - $value.

Это была единственная деталь, которую нужно изменить в зависимости от цветов, остальное будет работать для любого значения RGB.

Codepen: http://codepen.io/anon/pen/ezpmXJ