less 循环遍历

发表于 分类于
本文字数： 760 阅读时长 ≈ 1 分钟

  1. html

    1
    2
    3
    4
    5
    6
    <ul>
     <li>第一条数据</li>  
     <li>第二条数据</li>  
     <li>第三条数据</li>  
     <li>第四条数据</li> 
    </ul>

  2. less

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    // 定义颜色数组
    @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);

    1. 编译后样式

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      li:nth-child(1){
          color: #37a2da;
      }
      li:nth-child(2){
          color: #32c5e9;
      }
      li:nth-child(3){
          color: #67e0e3;
      }
      li:nth-child(4){
          color: #9fe6b8;
      }