Question

I’m setting up styles for a stacked bar graph, I would love to use SASS color manipulation functions to create the variations in a loop. Apparently I can’t use SASS functions inside a for loop:

@for $i from 0 through 9{
  .Bar#{$i}{
    background-color:{mix(#75CFFF, #2C5999, #{i * 10}%)};
  }
}

The idea being that the color fades from 100% #75CFFF to 100% #2C5999 in 10 percent increments.

Is there any way to do this?

Answer 1

Got it.

@for $j from 0 through 4{
  .Bar#{$j}{
    @extend .Bar;
    background-color:mix($background-color, #2C5999, (10-$j)*10%);
  }
}