列表函数

### length

返回值列表中的元素个数。
参数：

- `list` - 用逗号或空格分隔的数值列表。

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

输出：`3`

示例：

```less
@list: "banana", "tomato", "potato", "peach";
n: length(@list);
```
输出：

```less
n: 4;
```
### extract

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

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

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

输出：`dotted`

示例：

```less
@list: apple, pear, coconut, orange;
value: extract(@list, 3);
```
输出：

```less
value: coconut;
```
### range

发布于 v3.9.0

生成一个跨数值范围的列表。
参数：

- `start` - （可选） 起始值，例如 1 或 1px
- `end` - 最终值，例如 5px
- `step` - （可选）按以下方式递增的金额

示例：

```less
value: range(4);
```
输出：

```less
value: 1 2 3 4;
```
作用域内每个值的输出将与 `end` 值的单位相同。例如：

```less
value: range(10px, 30px, 10);
```
输出：

```less
value: 10px 20px 30px;
```
### each

发布于 v3.7.0

将规则集的评估与列表中的每个成员绑定。
参数：

- `list` - 用逗号或空格分隔的数值列表。
- `rules` - 匿名规则集/混入

示例：

```less
@selectors: blue, green, red;

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

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

默认情况下，每个列表成员的每个规则集都与一个 `@value`、`@key` 和 `@index` 变量绑定。对于大多数列表，`@key` 和 `@index`将被分配相同的值（数字位置，以 1 为基础）。不过，您也可以使用规则集本身作为结构化列表。例如：

```less
@set: {
  one: blue;
  two: green;
  three: red;
}
.set {
  each(@set, {
    @{key}-@{index}: @value;
  });
}
```
这将输出：

```css
.set {
  one-1: blue;
  two-2: green;
  three-3: red;
}
```
当然，您可以在每次调用规则集时调用带有保护的 mixins，这使得 `each()` 成为一个非常强大的函数。

#### 在 each() 中设置变量名称
你不必在 `each()` 函数中使用 `@value`、`@key` 和 `@index`。在 Less 3.7 中，通过 `each()` 函数，Less 引入了匿名 mixin 的概念，以后可能会扩展到语法的其他部分。

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

```less
.set-2() {
  one: blue;
  two: green;
  three: red;
}
.set-2 {
  // Call mixin and iterate each rule
  each(.set-2(), .(@v, @k, @i) {
    @{k}-@{i}: @v;
  });
}
```
如预期的那样输出：

```less
.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 3.9.0 版

只需生成一个数字列表并使用 `each` 将其扩展为一个规则集，即可模拟 `for` 循环。

示例：

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

输出：

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