循环和合并

循环

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);
  }

更多学习：https://www.9xkd.com/