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 隐式表示 "number of iterations".

我希望能够设置一种 "array of values" 例如：

伪代码：

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

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

Answer 1

可以传一个数组列表给mixin，然后用extract函数提取迭代次数对应的值使用

.generate-columns(@n: 4; @list: 10, 20, 30, 40 );

.generate-columns(@n; @i: 1; @list) when (@i =< @n) {
  .column-@{i} {
    width: percentage((extract(@list, @i)/100)); /* built-in function to convert numeric to percentage */
  }
  .generate-columns(@n; (@i + 1);  @list);
}

或如下所示（与上面的功能基本相同，唯一的区别是在上面的代码片段中我们使用了 named parameters 功能，因为我们跳过了为 @i 变量提供值在 mixin 调用中。）

@widths: 10, 20, 30, 40, 50;

.generate-columns(5; 1; @widths);

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

Answer 2

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

LESS：循环使用存储在数组（或类似的东西）中的数据

LESS: Loop using data stored in an array (or something similar)

for-loop

mixins

less