寫一個簡單的 for 迴圈

迴圈的使用是保持程式碼 DRY 並避免重複的絕佳方法。與 Sass 不同，Less 中沒有用於編寫迴圈的內建 @for 或 @each 指令，但它仍然可以使用遞迴 mixin 編寫。遞迴 mixin 只不過是一個不斷呼叫自己的混合。

使用 Less 編寫的迴圈有四個關鍵元件，它們如下：

• 具有保護表達的 mixin。當滿足迴圈的退出標準時，保護用於終止迴圈。在 JavaScript for 迴圈（for([initialization]; [condition]; [final-expression])）方面，後衛是 [condition]。
• 對 mixin 執行第一次迭代的主要呼叫。對 mixin 的這個主要呼叫可以在選擇器塊內（如果 mixin 沒有包含其所有內容的選擇器）或從選擇器塊外部（如果 mixin 有一個包含其內容的選擇器）。就 JavaScript for 迴圈而言，這個主要呼叫充當 [initialization]，因為它為類似計數器的變數設定了基本值。
• 從內部呼叫 mixin 以使其遞迴。此呼叫通常將計數器變數的遞增或遞減值作為引數傳遞。因此它呼叫後續迭代。就 JS for 迴圈而言，這與 [final-expression] 一起進行下一次呼叫。
• 最後但並非最不重要的是，mixin 的其他內容相當於典型 for 迴圈語法中的 statement。

下面是一個用 Less 編寫的簡單 for 迴圈，用於建立多個 #img*選擇器（其中*是數字），並將 background-image 屬性設定為 image*.png。

.for-loop(@index) when (@index > 0) { /* recursive mixin with guard expression - condition */

  /* the statement */
  #img@{index} {
    background-image: url("http://mysite.com/image@{index}.png");
  }
  /* end of the statement */

  .for-loop(@index - 1); /* the next iteration's call - final-expression*/
}
.for-loop(3); /* the primary call - initialization */

編譯 CSS：

#img3 {
  background-image: url("http://mysite.com/image3.png");
}
#img2 {
  background-image: url("http://mysite.com/image2.png");
}
#img1 {
  background-image: url("http://mysite.com/image1.png");
}