Dollar variable inside color adjuster

[riccardoerra]

Finding an issue having the plugin working with dollar variable in a loop. Combining it with postcss-for, I'm trying to achieve this:

Input:

@for $i from 1 to 3 {
    li:nth-of-type($i) {
        background-color: color( yellow h( calc( $i * 10 ) ) );
        width: calc( $i% * 10 );
    }
}

Expected output:

li:nth-of-type(1) {
    background-color: rgb(255, 43, 0);
    width: calc( 1% * 10 );
}

li:nth-of-type(2) {
    background-color: rgb(255, 85, 0);
    width: calc( 2% * 10 );
}

li:nth-of-type(3) {
    background-color: rgb(255, 128, 0);
    width: calc( 3% * 10 );
}

Instead I get this:

li:nth-of-type(1) {
    background-color: rgb(0, 0, 0);
    width: calc( 1% * 10 );
}

li:nth-of-type(2) {
    background-color: rgb(0, 0, 0);
    width: calc( 2% * 10 );
}

li:nth-of-type(3) {
    background-color: rgb(0, 0, 0);
    width: calc( 3% * 10 );
}

As you can see from width: calc( $i% * 10 ), the dollar variable is looping fine so I reckon it's probably an issue with this plugin.

I also tried h( calc( $(i) * 10 ) ), h( calc( $(i)deg * 10 ) ) and h( calc( $ideg * 10 ) ) instead of just h( calc( $i * 10 ) ) but still not working.

[Semigradsky]

How about using postcss-color-function transformations after variables and postcss-for transformations?

[riccardoerra]

@Semigradsky Not sure I follow. Feel free to fork this and make your changes: https://codepen.io/riccardoerra/pen/KWRgOG

[Semigradsky]

@riccardoerra See: https://codepen.io/semigradsky/pen/MoYNbj

I have moved postcss-for to start.

[riccardoerra]

Great stuff! Thanks for the help @Semigradsky