1、lenght()

返回列表长度。

语法

length(@list)

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

例子

length(1px solid #0080ff);

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

编译后：

3
n: 4;

2、extract()

返回列表中指定位置的值。列表的下标从 1 开始。

语法

extract(@list, @index)

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

例子

extract(8px dotted red, 2);

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

输出:

dotted
value: coconut;

3、range()

生成一个数值范围的列表

语法

range(@start, @end, @step)

• start - (可选) 起始值，例如 1 或 1px
• end - 结束值，范围中每个值的输出单位将与end值的单位相同。例如 5px
• step - (可选) 增量步长

例子

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

输出:

value: 1 2 3 4 5;
value: 10px 20px 30px;

4、each()

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

语法

each(@list, @rules)

• @list 逗号或空格分隔的值列表
• @rules 匿名规则集/混合
  • @value - 列表中的当前值
  • @key - 当前值的键
  • @index - 当前值的索引(基于 1 的数字位置)

默认情况下，每个规则集会绑定到@value、@key和@index变量。对于大多数列表，@key和@index会被赋予相同的值(基于 1 的数字位置)。然而，你也可以将规则集本身用作结构化列表。

变量匿名化

在 Less 3.7 中，Less 引入了匿名混合的概念，each()函数将获取匿名混合中定义的变量名，并按顺序将它们绑定到@value、@key和@index值。这意味着你不必在each()函数中显式的使用@value、@key和@index。

例子

例子 1

@selectors: blue, green, red;

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

输出:

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

例子 2

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

输出：

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

例子 3 匿名化参数

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

输出：

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

例子 4 使用range()和each()来模拟for循环

通过range()生成一个数字列表并使用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;
}

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24