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循环来缩短。

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

但是有一个问题。$graph_$i不能像$graph_1那样被解析，它仍然是$graph_$i。

对于这种情况，有什么好的解决方案吗？

Answer 1

答案1

我不得不运行postcss-advanced variables两次。因此，我从依赖项中删除了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));
    }
}

ANSWER 2

我在postcss-simple-vars上提交了一个问题，Andrey Sitnik接受了它。嵌套插值可以像this一样使用。但是，它不能与postcss-advanced变量的@for循环一起使用