Less的遍历循环写法

1.html

<ul>
 <li>第一条数据</li>  
 <li>第二条数据</li>  
 <li>第三条数据</li>  
 <li>第四条数据</li> 
</ul>   
 

2.less

// 定义颜色数组
@colorArr: #37a2da, #32c5e9, #67e0e3, #9fe6b8;

// 定义循环最大值，此处使用颜色数组的长度
@len: length(@colorArr);

/**
 * 定义循环方法
 * @index--传入的循环起始值
 * @len--循环的最大值  也可使用常量  eg:(@index<4)
 */ 
.Loop(@index) when(@index<@len){

    // 执行内容 
    // 类名参数要加大括号@{index}   
    // 根据index获取对应的某个值 extract(数组名, 对应的序号)
    li:nth-child(@{index}){
        color:extract(@colorArr,@index);
    }

    //递归调用 达到循环目的
    .Loop(@index+1);

}

// 调用循环
.Loop(0);

3.编译后样式

li:nth-child(1){
    color: #37a2da;
}
li:nth-child(2){
    color: #32c5e9;
}
li:nth-child(3){
    color: #67e0e3;
}
li:nth-child(4){
    color: #9fe6b8;
}