在less中遍历数组元素

在Less中并没有对数组遍历的原生支持，我们可以通过mixin递归的方式来实现遍历。

1、定义数组元素

1	@colors: red, green, blue, black;

2、获取数组元素长度

1	@length: length(@color);

3、数组元素取值

1	@item: extract(@colors, @index);

4、遍历

@colors: red, green, blue, black;
.for(@data, @i: 1) when(@i =< length(@data)) {
    @item: extract(@data, @i);
    div {
        background: @item;
    }
    .for(@data, (@i + 1));
}
.for(@colors);

以上的less会被编译成以下css:

div {
  background: red;
}
div {
  background: green;
}
div {
  background: blue;
}
div {
  background: black;
}

# css, less

支付宝

微信

在less中遍历数组元素

1、定义数组元素

2、获取数组元素长度

3、数组元素取值

4、遍历

喜欢这篇文章？打赏一下作者吧

评论

分类

标签云

最新文章

归档

标签

最新文章

归档

标签

Your browser is out-of-date!