Question

这是我所拥有的，所有变量都已定义，我没有附加它因为它们无关紧要

.col-loop (@index) when (@index > 0) {

    .small-col-@{index}*3 {
        float: left;
        width: @index * @small-column-width + (@index - 1) * @small-column-margin;
        margin-right: @small-column-margin;
    }

    .col-loop(@index - 1);
}

.col-loop (0) {}
.col-loop(@small-iterations);

无效的部分是@{index}*3，我尝试了@{~'index*3'}的一些变体，我认为~'@index*3'，没有效果

我该如何做这部分？

Answer 1

你不能在选择器中使用算术表达式或函数（因为大多数符号如*，+，()等已经具有预定义的CSS含义在选择器上下文中）。

要实现您的需求，请将@index * 3分配给临时变量并在选择器中使用该变量，例如：

.col-loop(@index) when (@index > 0) {
    @i: @index * 3;
    .small-col-@{i} {
        float: left;
        width: @index * @small-column-width
            + (@index - 1) * @small-column-margin;
        margin-right: @small-column-margin;
    }

    .col-loop(@index - 1);
}

如何在循环中将计算作为类名的一部分进行？

1 个答案: