我在这个项目中使用SCSS。
我需要根据百分比值从绿色到红色创建100个类。所以100%是绿色,0%是红色。
我希望它能够消失,所以大约50%它会变成橙色等。
我认为你可以用SASS做些什么,但我不知道从哪里开始。
提前致谢
答案 0 :(得分:3)
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);}
}
结果:
答案 1 :(得分:0)
感谢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%,因为它太强烈了。