SCSS线性梯度效应

Question

我有很多spans彼此相邻，我想添加一些线性渐变效果 - 所以第一个background-color: $a ，＆＃34;过渡颜色从$ a到$ b＆＃34; 之间的最后一个background-color: $b和spans。如果我没有任何意义，这张图片会对你有帮助：

我尝试使用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

如何创建＆＃34;效果＆＃34; ？可能有一些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