for-loop - LESS:使用存储在数组(或类似的东西)中的数据进行循环

Question

我在 LESS 文档中找到了这个示例:

少:

.generate-columns(4);

.generate-columns(@n, @i: 1) when (@i =< @n) {
  .column-@{i} {
    width: (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}

输出CSS:

.column-1 {
  width: 25%;
}
.column-2 {
  width: 50%;
}
.column-3 {
  width: 75%;
}
.column-4 {
  width: 100%;
}

此循环生成 4 个不同的 div，因为“4”是第一个 mixin 调用传递的值，但生成的值完全在 mixin 内部计算。换句话说，@n 隐含地表示“迭代次数”。

我希望能够设置一种“值数组”，例如:

伪代码:

.generate-columns( [25,50,75,100] );

应该传递给循环 mixin，然后使用每个数组的值生成相同的 CSS 代码。可能吗？

Answer 1

.generate-columns-loop(@i; @widths) when (@i <= length(@widths)) {
  .column-@{i} {
    @width: extract(@widths, @i);
    width: (@width * 1%);
  }
  .generate-columns-loop((@i + 1), @widths);
}
.generate-columns(@widths...) {
  .generate-columns-loop(1, @widths);
}

.generate-columns(25, 50, 75, 100);