绿色到scss中的红色

时间:2017-01-30 02:15:24

标签: css sass

我在这个项目中使用SCSS。

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

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

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

提前致谢

2 个答案:

答案 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);}
}

结果:

enter image description here

答案 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%,因为它太强烈了。