
- 語言特性
- Less - 巢狀規則
- Less - 巢狀指令和冒泡
- Less - 操作
- Less - 轉義
- Less - 函式
- Less - 名稱空間和訪問器
- Less - 作用域
- Less - 註釋
- Less - 匯入
- Less - 變數
- Less - 擴充套件
- Less - 混合
- Less - 引數化混合
- Less - 混合作為函式
- Less - 向混合傳遞規則集
- Less - 匯入指令
- Less - 匯入選項
- Less - 混合保護
- Less - CSS 保護
- Less - 迴圈
- Less - 合併
- Less - 父選擇器
- 函式
- Less - 雜項函式
- Less - 字串函式
- Less - 列表函式
- Less - 數學函式
- Less - 型別函式
- Less - 顏色定義函式
- Less - 顏色通道函式
- Less - 顏色操作
- Less - 顏色混合函式
- 用法
- Less - 命令列用法
- 在瀏覽器中使用 Less
- Less - 瀏覽器支援
- Less - 外掛
- Less - 程式化用法
- Less - 線上編譯器
- Less - GUI
- Less - 編輯器和外掛
- Less - 第三方編譯器
- Less - 框架
- Less 有用資源
- Less - 快速指南
- Less - 有用資源
- Less - 討論
LESS - 迴圈
在本章中,我們將瞭解 LESS 中迴圈的工作原理。迴圈語句允許我們多次執行一條語句或一組語句。當遞迴混合與保護表示式和模式匹配結合時,可以建立各種迭代/迴圈結構。
示例
以下示例演示了在 LESS 檔案中使用迴圈 −
loop_example.htm
<!doctype html> <head> <link rel = "stylesheet" href = "style.css" type = "text/css" /> </head> <body> <div class = "cont"> <h2>Welcome to TutorialsPoint</h2> <p>The largest Tutorials Library on the web. </p> </div> </body> </html>
接下來,建立style.less檔案。
style.less
.cont(@count) when (@count > 0) { .cont((@count - 1)); width: (25px * @count); } div { .cont(7); }
您可以使用以下命令將style.less檔案編譯為style.css −
lessc style.less style.css
執行上述命令;它將自動建立style.css檔案,其中包含以下程式碼 −
style.css
div { width: 25px; width: 50px; width: 75px; width: 100px; width: 125px; width: 150px; width: 175px; }
輸出
請按照以下步驟檢視上述程式碼的工作原理 −
將上述 html 程式碼儲存在loop_example.htm檔案中。
在瀏覽器中開啟此 HTML 檔案,將顯示以下輸出。

廣告