使用SASS增加多個div的顏色的不透明度

我有18個div，我已經爲每個div首先進行了最後混合，我混合了2種顏色，從$ color-1開始並以$ color-2結束。它的工作原理完美。然後我想增加透明度，除了我對數學有些困惑（不是我的強項）。使用SASS增加多個div的顏色的不透明度

歌廳的不透明度是在遞增步驟從1 - 18容易如下所示$opacity: ((1/$itemCount) * $i);但是我不想它是從0 - 1我想不透明度爲從範圍在18個步驟0.2 - 0.8這就是我的困惑，我無法用數學來計算它。

@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); 
    } 
}

來源

2014-07-09 Daimz

這是一個有點複雜的情況下，我能做到這樣說，這

$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

來源

2014-07-09 13:53:14

我發現基於你的建議看我的編輯更簡單的方法。 – Daimz

這是我如何解決它：

@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); 
    } 
}

來源

2014-07-09 14:35:43 Daimz

偉大的解決方案，GJ！ –

使用SASS增加多個div的顏色的不透明度

回答

相關問題