薩斯：與@for循環變更顏色

Question

我嘗試變暗可變數目一樣， 的div與下面的代碼：

@mixin color-divs ($count, $baseName, $startcolor) { 
    $color: $startcolor; 
    @for $i from 0 through $count { 
     $color: darken($color, 9%); 
     ##{$baseName}_#{$i} { background-color:$color; } 
    } 
} 

與該代碼我期待，變量$顏色與改變每一次迭代，但這並沒有按預期工作。該值在第一次初始化後被修復，並且每個元素具有相同的顏色。

有沒有辦法workarround這個問題或有另一種方法來解決混合問題？

Answer 1

您可以使用$ i裏面的@for將顏色變暗，並將相應的類應用於div。希望這可以幫助。

SCSS

@mixin color-divs ($count, $baseName, $startcolor) { 
    @for $i from 0 through $count { 
     $background-color: darken($startcolor, $i * $i); 
    .colored-div#{$i} { 
     background: $background-color; 
     height:100px; 
     width:200px; 
     float: left; 
     margin-right: 5px; 
    } 
    } 

} 
@include color-divs(5,'a',#ffd8b1); 

HTML

<div class="colored-div1">a</div> 
<div class="colored-div2">b</div> 
<div class="colored-div3">c</div> 
<div class="colored-div4">d</div> 
<div class="colored-div5">e</div> 

演示

見demo

Answer 2

我創建了一個基於你的mixin這個例子：

@mixin color-divs ($count, $baseName, $startcolor) { 
    $loop_color: $startcolor; 
    @for $i from 0 through $count { 
     $loop_color: darken($loop_color, 9%); 
     .#{$baseName}-#{$i} { background-color: $loop_color; } 
    } 
} 

div { 
    width: 100px; 
    height: 100px; 
    float: left; 
} 

@include color-divs(6,'div',#faa) 

使用以下標記：

<div class="div-1"></div> 
<div class="div-2"></div> 
<div class="div-3"></div> 
<div class="div-4"></div> 
<div class="div-5"></div> 
<div class="div-6"></div> 

輸出：http://jsfiddle.net/jdtvF/

http://uk.omg.li/P0dF/by%20default%202013-05-16%20at%2010.10.43.png

div { 
    width: 100px; 
    height: 100px; 
    float: left; } 

.div-0 { 
    background-color: #ff7c7c; } 

.div-1 { 
    background-color: #ff4e4e; } 

.div-2 { 
    background-color: #ff2020; } 

.div-3 { 
    background-color: #f10000; } 

.div-4 { 
    background-color: #c30000; } 

.div-5 { 
    background-color: #960000; } 

.div-6 { 
    background-color: #680000; }