List Functions

length

返回值列表中元素的数量。

参数

• list - 由逗号或空格分隔的值列表。

示例：length(1px solid #0080ff);

输出：3

示例：

@list: "banana", "tomato", "potato", "peach";
n: length(@list);

输出：

n: 4;

extract

返回列表中指定位置的值。

参数

• list - 由逗号或空格分隔的值列表。
• index - 一个整数，指定要返回的列表元素的位置。

示例：extract(8px dotted red, 2);

输出：dotted

示例：

@list: apple, pear, coconut, orange;
value: extract(@list, 3);

输出：

value: coconut;

range

发布于 v3.9.0

生成跨越一系列值的列表

参数

• start - （可选）起始值，例如 1 或 1px
• end - 结束值，例如 5px
• step - （可选）递增量

示例：

value: range(4);

输出：

value: 1 2 3 4;

范围内每个值的输出将与 end 值的单位相同。例如：

value: range(10px, 30px, 10);

输出：

value: 10px 20px 30px;

each

发布于 v3.7.0

将规则集的评估绑定到列表的每个成员。

参数

• list - 由逗号或空格分隔的值列表。
• rules - 一个匿名规则集/混合。

示例：

@selectors: blue, green, red;

each(@selectors, {
  .sel-@{value} {
    a: b;
  }
});

输出：

.sel-blue {
  a: b;
}
.sel-green {
  a: b;
}
.sel-red {
  a: b;
}

默认情况下，每个规则集都会绑定到一个 @value、@key 和 @index 变量上，每个列表成员一个。对于大多数列表，@key 和 @index 将被分配相同的值（基于数字位置，从 1 开始）。但是，你也可以将规则集本身用作结构化列表。例如：

@set: {
  one: blue;
  two: green;
  three: red;
};
.set {
  each(@set, {
    @{key}-@{index}: @value;
  });
}

这将输出：

.set {
  one-1: blue;
  two-2: green;
  three-3: red;
}

由于你当然可以为每个规则集调用带有保护的混合，因此这使得 each() 成为一个非常强大的函数。

在 each() 中设置变量名

你不必在 each() 函数中使用 @value、@key 和 @index。在 Less 3.7 中，使用 each() 函数，Less 引入了匿名混合的概念，这可能会在以后的语法中扩展到其它部分。

匿名混合使用 #() 或 . 的形式。

以 . 或 # 开头，就像普通的 mixin 一样。在 each() 中，可以像这样使用它：

.set-2() {
  one: blue;
  two: green;
  three: red;
}
.set-2 {
  // 调用 mixin 并迭代每个规则
  each(.set-2(), .(@v, @k, @i) {
    @{k}-@{i}: @v;
  });
}

这将输出预期的结果：

.set-2 {
  one-1: blue;
  two-2: green;
  three-3: red;
}

each() 函数将匿名 mixin 中定义的变量名称绑定到 @value、@key 和 @index 值，按顺序。如果只写 each(@list, #(@value) {})，则 @key 和 @index 都不会被定义。

使用 range 和 each 创建 for 循环

需要 Less v3.9.0

你可以通过生成数字列表并使用 each 将其扩展为规则集来模拟 for 循环。

例如：

each(range(4), {
  .col-@{value} {
    height: (@value * 50px);
  }
});

输出：

.col-1 {
  height: 50px;
}
.col-2 {
  height: 100px;
}
.col-3 {
  height: 150px;
}
.col-4 {
  height: 200px;
}