使用SASS增加几个div的颜色不透明度

Question

我有18个div，我已经做到了，所以对于每个div，先到最后，我混合了2种颜色，从$color-1，最后是$color-2。它运行得很完美，就像它应该的那样。然后，我想增加不透明度，这也有效，除了我有点困惑的一些数学(不是我的优点)。

从1-18获得不透明度是很容易的，但是我不希望它是从0-1，我想不透明度范围从0.2 - 0.8的18步，这是我有我的困惑，我不能让我的头脑在数学计算。

@for $i from 1 through 18 {
  $itemCount: 18;
  $weight: (( 100% / $itemCount ) * $i );
  $opacity: ((1 / $itemCount) * $i);
  $mix: mix($color-1, $color-2, $weight);
  %item-color-#{$i}{
    background: rgba( $mix, $opacity);
  }
}

Answer 1

情况有点复杂，我设法做到了

    $list: ();
    $i: 0.2;
    $itemCount: 18;
    @while $i < 0.8 {
      $list: (append($list, $i));
      $i: $i + 0.6/$itemCount;
    }

    $z: 1;
    @while $z < 19 {
      p-#{$z} {
        padding: nth($list, $z);
      }
      $z: $z + 1;
    }

您必须创建一个空列表，并在该列表中追加0.2到0.8之间的每个值。步数为18级，速度为(0.8 - 0.2)/18。

然后，您必须创建另一个while语句，在该语句中，您应该从该列表中选择值，该列表现在具有所有所需的值。

上面是一个例子，您可以看到输出。

一个例子：http://sassmeister.com/gist/5dde2f3468b6b2265002

Answer 2

我就是这样解决的：

@for $i from 1 through 18 {
  $itemCount: 18;
  $weight: (( 100% / $itemCount ) * $i );
  $min-opacity: 0.3;
  $max-opacity: 0.9;
  $opacity-range: $max-opacity - $min-opacity;
  $opacity: ((($opacity-range/$itemCount)*$i)+$min-opacity);
  $mix: mix($color-1, $color-2, $weight);
  %item-color-#{$i}{
    background: rgba( $mix, $opacity);
  }
}