1. length(@list) 长度函数

参数和返回值

参数：传入一个less的列表变量
返回值：返回这个列表的长度

less的列表变量

通过逗号或者空格分隔的多个值就是列表，例如：border: 1px solid red 其中的1px solid red就是一个列表。

实例1

  1. @list:1px solid red;
  2. n: length(@list);

编译为：

n: 3;

实例2

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

编译为：

n: 4;

2. extract(@list, index) 选择列表中的某个值

参数和返回值

参数：
@list: 一个less列表
index：整数，选择列表中的某个位置上的值

实例

@list: 8px solid red;
value: extract(@list, 2);

编译为：

value: solid;  //取自列表8px solid red中的第二个位置的值solid

3. range(start, end, step) 列表范围函数

参数和返回值

参数：
start：列表的起始值
end：range函数的终止值
step：取值的步长
返回值：根据range的范围和步长生成一个列表。

实例

//less
value: range(4);

//css
value: 1 2 3 4;

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

//css
value: 10px 20px 30px;

其中列表中所有值的单位将与range中最后一个带单位的参数相同。


4. each(list/object，rules) 遍历列表(较难)

和forEach类似。

参数和返回值

参数：
list：一个less列表或者一组用大括号包裹的值集合
rules：规定遍历列表时的规则
返回值：
根据遍历规则对列表中的每一个变量进行执行，然后返回规则中的内容。

功能

在用each函数遍历列表或集合时，可以用 @value 取得当前遍历的值（对于一般列表，比如：

@list: 1px solid blue;

），如果遍历的是集合，可以用 @value 取得当前遍历的值，还可以用@key 和 @index 来取得当前遍历的键，和顺序索引值（对于集合，形同：

@sets: {
  color: red;
  text-align: center;
}

）

实例1

@selectors: blue, green, red;

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

编译为：

.sel-blue {
  color: blue;
}
.sel-green {
  color: green;
}
.sel-red {
  color: red;
}

实例2: 遍历集合/对象

@set: {
  one: blue;
  two: green;
  three: red;
}
.set {
  each(@set, {
    @{key}-@{index}: @value; //key为集合中的键，value为值，index为顺序索引
  });
}

编译为：

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

实例3：遍历mixin混入类

并在each()中自定义变量的名字

在less3.7版本以上，可以在each中传入mixin混入类了，并且你不一定要使用@value, @key, @index了，你可以通过类似混入守卫的方式来自定义变量的名字。和混入一样，你可以通过匿名的方式，#() 或者 .()来引入变量。变量按照value，key，index的顺序引入使用如下：

.set-2() {
  one: blue;
  two: green;
  three: red;
}
.set-2 {
  // 传入mixin，并迭代每一个键值，变量按照value，key，index的顺序引入
  each(.set-2(), .(@v, @k, @i) {
    @{k}-@{i}: @v;
  });
}

编译为：

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

当然你也可以只取其中的几个值，比如 each(@list, #(@value) {}), 这样@key和@index都不会被引入

less中的for循环（使用range和each）

你可以通过组合range和each函数来实现简单的for循环，其方式和python 的样子很像。

实例

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

输出：

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