绿色到scss中的红色

Question

我在这个项目中使用SCSS。

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

我希望它能够消失，所以大约50％它会变成橙色等。

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

提前致谢

Answer 1

Sass具有原生本机混合功能mix($color-1, $color-2, $weight) $ weight是你以百分比形式添加的$ color-1的数量。

参考：http://sass-lang.com/documentation/Sass/Script/Functions.html

下面的循环将生成101个类.class-0 ... .class-100从0％红色切换到100％红色。

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

结果：

Answer 2

感谢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;
}

我把它变暗了10％，因为它太强烈了。