Sass: Change color with #for loop - css

Question

I try to darken a variable number of divs like that
with following code:
#mixin color-divs ($count, $baseName, $startcolor) {
$color: $startcolor;
#for $i from 0 through $count {
$color: darken($color, 9%);
##{$baseName}_#{$i} { background-color:$color; }
}
}
With that code I was expecting, that the variable $color is changed with every iteration but this didn't work as expected. The value is fix after the fist initialisation and every element has the same color.
Is there a way to workarround that problem or is there another way to solve that problem with a mixing?

Answer 1

You can darken the color using $i inside #for and apply respective classes to the divs. Hope this helps.
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
See demo

Answer 2

I created this example based on your 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)
Used with the following markup:
<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>
Output: 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; }

Answer 3

To just go from one color to another, for say, a number of consecutive <div>:
#for $i from 0 through 11
&:nth-child(#{$i})
transform: rotate(#{30*$i}deg)
background-color: mix($gray1, $gray2, $i / 12 * 100% )
Notes
Note, that you don't need any #{…} inside the mix(), because it's a sass function, so it's clear that any variables and computations used insides are to be resolved before turning it into CSS.
The transform is just my use case (for demonstration). Here, one does need #{…}
and note the +/-1 issue (like in every for-loop, in any language): going from 0/12 to 11/12
lastly, turning it into a percentage to please the mix function
as you see: could be done in a mixin, but doesn't have to be!