返回值列表中元素的个数。
参数:
list - 用逗号或空格分隔的数值列表。
示例: length(1px solid #0080ff);
输出: 3
示例:
@list: "banana", "tomato", "potato", "peach"; n: length(@list);
输出:
n: 4;
返回列表中指定位置的值。
参数:
list - 用逗号或空格分隔的数值列表。
index - 一个整数,指定要返回的列表元素的位置。
示例: extract(8px dotted red, 2);
输出: dotted
示例:
@list: apple, pear, coconut, orange; value: extract(@list, 3);
输出:
value: coconut;
发布版本 3.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;
发布版本 3.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; }
当然,由于您可以为每个规则集调用带保护的mixin,这使得each()成为一个非常强大的函数。
您不必在 each() 函数中使用 @value、@key 和 @index。在 Less 3.7 中,Less 通过 each() 函数引入了匿名混合体的概念,以后可能会扩展到语法的其他部分。
匿名 mixin 和普通 mixin 一样,使用以 . 或 # 开头的 #() 或 .()。在 each() 中,您可以这样使用它:
.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; }); }
正如预期的那样,输出结果:
.set-2 { one-1: blue; two-2: green; three-3: red; }
each() 函数将使用匿名混合元素中定义的变量名,并依次将它们与 @value、@key 和 @index 值绑定。如果只写 each(@list, #(@value) {}),那么 @key 和 @index 都不会被定义。
需要 Less v3.9.0
您可以简单地通过生成一个数字列表并使用每个列表将其扩展为规则集来模拟 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; }