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

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