Question

我在LESS文档中找到了这个例子：

LESS：

.generate-columns(4);

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

OUTPUT CSS：

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

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

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

伪码：

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

应该传递给循环mixin，然后使用每个数组的值生成相同的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：使用存储在数组中的数据循环（或类似的东西）

2 个答案: