寫一個簡單的 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");
}