SCSS 线性渐变效果

Question

我有很多 spans 彼此相邻，我想添加一些 线性渐变效果 - 所以第一个有 background-color: $a，最后一个有 @987654329 @ 和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