循環和合並

循環

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/