循环和合并

循环

Loops 语句允许我们多次执行一个语句或一组语句。

在 Less 中，mixin 可以自称，与 Guard 表达式和模式匹配 组合使用时，这个递归 mixin 可以创建各种迭代 / 循环结构。

    .loop(@count) when (@count > 0) {
      // 下一次迭代
      .loop((@count - 1));    
      // 每次迭代的代码
      width: (20px * @count);  
    }
    .box {
      // 启动循环
      .loop(10);
    }
    // 输出 css
    .box {
      width: 10px;
      width: 20px;
      width: 30px;
      width: 40px;
      width: 50px;
      width: 60px;
      width: 70px;
      width: 80px;
      width: 90px;
      width: 100px;
    }
    
    
    // 使用递归循环生成 CSS 网格类的一般示例
    .grids(10);
    .grids(@n, @i: 1) when (@i =< @n) {.column@{i} {width: (@i * 100% / @n);
      }
      .grids(@n, (@i + 1));
    }
    // 输出 css
    .column1 {width: 10%;}
    .column2 {width: 20%;}
    .column3 {width: 30%;}
    .column4 {width: 40%;}
    .column5 {width: 50%;}
    .column6 {width: 60%;}
    .column7 {width: 70%;}
    .column8 {width: 80%;}
    .column9 {width: 90%;}
    .column10 {width: 100%;}

合并

merge 功能允许将多个属性中的值聚合到单个属性下的逗号或空格分隔的列表中，merge 对于背景和变换等属性很有用。

• 逗号，用逗号附加属性值，它增加了属性值到最后。

      .mixin() {background-color: green;}
      .comma {.mixin();
        background-color: red;
      }
      
      // 输出
      .comma {background-color: green, red;}

• 空间，用空格附加属性值，它添加属性值与空格。

     .mixin() {transform+_: scale(2);
     }
     .space {.mixin();
       transform+_: rotate(30deg);
     }
     
     // 输出
     .space {transform: scale(2) rotate(30deg);
     }