Less從入門到精通——循環（附源碼、學習視頻和筆記）

完整學習視頻及資料在這裏哦~
連接：https://pan.baidu.com/s/1cXs9KKoIFP1M5oTClSr7yg
提取碼：4k8t

循環(loop)

在Less中，混合能夠調用它自身，這樣，當一個混合遞歸調用本身再結合Guards表達式和模式匹配這兩個特性，就能夠寫出循環結構。

.loop(@counter) when (isnumber(@counter)) and (@counter > 0) {
    .loop(@counter - 1);
    .div@{counter}{
        width: 10 * @counter;
        height: 10 * @counter;
    }
}
li{
    .loop(3);
}
// 輸出 生成 3 個 不一樣的div並分別給了相應的樣式
li .div1 {
  width: 10;
  height: 10;
}
li .div2 {
  width: 20;
  height: 20;
}
li .div3 {
  width: 30;
  height: 30;
}