在scss中由绿色变为红色

我正在为这个项目使用SCS

我需要根据百分比值创建100个从绿色到红色的类。所以100%为绿色，0%为红色

我想让它褪色，所以在50%左右，它会是橙色等

我想你可以用SASS做些什么，但我不知道从哪里开始

---

提前感谢

感谢Michael Coker提供的解决方案。有关SCSS转换功能，请参见下文

$red: 255;
$green: 0;
$count: 0;
$step: 5.1;

@while $green < 255 {
  $green: $green + $step;
  @if ($green > 255) { $green: 255; }

  .percent-#{$count} {
    background-color: darken(rgb($red, $green, 0), 10%);
  }

  $count: $count + 1;
}

@while $red > 0 {
  $red: $red - $step;
  @if ($red < 0) { $red: 0; }

  .percent-#{$count} {
    background-color: darken(rgb($red, $green, 0), 10%);
  }

  $count: $count + 1;
}

$red:255；
$green:0；
$count:0；
$step:5.1；
@而$green<255{
$green:$green+$step；
@如果（$green>255）{$green:255；}
.percent-#{$count}{
背景色：深色（rgb（$red，$green，0），10%）；
}
$count:$count+1；
}
@而$red>0{
$red:$red-$step；
@如果（$red<0）{$red:0；}
.percent-#{$count}{
背景色：深色（rgb（$red，$green，0），10%）；
}
$count:$count+1；
}

---

我确实把它调暗了10%，因为它有点太浓了。

Sass有一个本地混合功能

mix（$color-1，$color-2，$weight）

$weight是您在百分比中添加的$color-1的数量

参考：

下面的循环将生成101个类。0类。100级从0%红色切换到100%红色

@for $i from 0 through 100 {
    .color-#{$i}{ background: mix(red, green, $i);}
}

结果:

---

我假设这将是一个神奇的hocus pocus，包括for循环和绿色和红色的RGB或十六进制值，但我对RGB/hex值如何表示颜色的了解还不够，无法计算出要循环并生成100种颜色的内容范围。这有帮助吗？干杯@MichaelCoker，真是妙不可言！我曾经有过这个，但不喜欢它给我的橘子。申请的时候不是很愉快。另一个函数返回更令人愉快的颜色渐变。这是我所要求的，这要归功于你。