postcss - 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));
    }
}

答案 2

我在 postcss-simple-vars 提交了一个问题，Andrey Sitnik 接受了它。嵌套插值可以这样使用。但是，它不能与@forpostcss-advanced-variables 循环一起使用