css - 在 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);}
}

结果: