Question

我正在使用Less Loops，它们实际上只是递归参数化的mixins。

我想在选择器定义中使用传入的参数（@counter），如下所示：

.loop(@counter) when (@counter > 0) {
    // call next iteration
    .loop((@counter - 1));    

    // code for each iteration
    &[data-size="@counter"] {
        width:  (3px * @counter);
        height: (3px * @counter);
    }
}

div {
  .loop(5); // launch the loop
}

如果您将其复制并粘贴到在线较少的编译器（如less2css）中，您将获得以下内容：

div[data-size="@counter"] {
  width: 3px;
  height: 3px;
}

而我想要的是：

div[data-size="1"] {
  width: 3px;
  height: 3px;
}

这可能吗？

Answer 1

事实证明你必须使用大括号{}来转义变量，如下所示：

.loop(@counter) when (@counter > 0) {
    // call next iteration
    .loop((@counter - 1));    

    // code for each iteration
    &[data-size="@{counter}"] {
        width:  (3px * @counter);
        height: (3px * @counter);
    }
}

div {
  .loop(5); // launch the loop
}

在属性选择器中使用较少的参数

1 个答案: