Less 列表函数

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

发布版本 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;

each

发布版本 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() 中设置变量名

您不必在 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 都不会被定义。

使用 range 和 each 创建 for 循环

需要 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;
}


说说我的看法
全部评论(
没有评论
关于
本网站专注于 Java、数据库(MySQL、Oracle)、Linux、软件架构及大数据等多领域技术知识分享。涵盖丰富的原创与精选技术文章,助力技术传播与交流。无论是技术新手渴望入门,还是资深开发者寻求进阶,这里都能为您提供深度见解与实用经验,让复杂编码变得轻松易懂,携手共赴技术提升新高度。如有侵权,请来信告知:hxstrive@outlook.com
公众号