循环

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.fly63.com/article/detial/6149