lee 使用循环

 html:

  <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
    </ul>

// 定义颜色数组

@colorArr: #37a2da, #126377, #48c8ca, #9fe6b8, #32e93b, #e38067, #e69fba,

#a49fe6;

// 定义循环最大值，此处使用颜色数组的长度

@len: length(@colorArr);



/**

* 定义循环方法

* @index--传入的循环起始值

* @len--循环的最大值 也可使用常量 eg:(@index<4)

*/

.Loop(@index) when(@index<@len) {

// 执行内容

// 类名参数要加大括号@{index}

// 根据index获取对应的某个值 extract(数组名, 对应的序号)

li:nth-child(@{index}) {

background: extract(@colorArr, @index);

}



//递归调用 达到循环目的

.Loop(@index+1);

}



// 调用循环

.Loop(0);

li {

width: 100px;

height: 100px;

display: inline-block;

}