css - Sass: Change color with @for loop

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!