PostCSS вложенных переменной

Question

У меня есть этот код в моем файле postcss

.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;} 

хорошо, я думал, что это может быть сократить, используя для петель

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

но была проблема. $graph_$i не может быть разрешен как $graph_1, он просто остался $graph_$i.

Есть ли хорошие решения для этой ситуации?

Answer 1

ОТВЕТ 1

мне пришлось бежать postcss продвинутого-переменными дважды. Итак, я удаляю precss из зависимостей и добавляю его внутренние зависимости непосредственно к моему проекту.

Это то, что я написал в моем файле конфигурации webpack.

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

и в моем файле PostCSS,

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

ОТВЕТ 2

я подам вопрос на postcss-простой-Пере, и Андрей Ситник принял его. Вложенная интерполяция может использоваться как this. Но он не может использоваться с @for циклами postcss-advanced-variables