PostCSS nested variable

Question

I have this code in my postcss file

.btn.color1>button{background:$graph_1;}
.btn.color2>button{background:$graph_2;}
.btn.color3>button{background:$graph_3;}
.btn.color4>button{background:$graph_4;}
.btn.color5>button{background:$graph_5;}

well, i thought this could be shorten by using for loops

@for $i from 1 to 5 {
    .btn.color$i>button{background:$graph_$i;}
}

but there was a problem. $graph_$i couldn't be resolved like $graph_1, it just remained as $graph_$i.

is there any good solutions for this situation?

FourwingsY · Answer 1 · 2016-07-02T08:53:38.703

ANSWER 1

I had to run postcss-advanced-variables twice. So, i remove precss from dependencies, and add it's inner dependencies directly on my project.

This is what I wrote in my webpack config file.

postcss: function(webpack) {
    return [
        ...
        require("postcss-advanced-variables"),
        require("postcss-advanced-variables"),
        ...
    ]
}

and in my PostCSS file,

@for $i from 1 to 5 {
    .btn.color$i > button{
        background: $(graph_$(i));
    }
}

ANSWER 2

I submit an issue at postcss-simple-vars, and Andrey Sitnik accepted it. Nested interpolation can used like this. But, it can't used with @for loop of postcss-advanced-variables

PostCSS nested variable

1 Answers1