在前端开发中，循环结构是编写高效、可维护CSS代码的重要工具。Less 提供了强大的循环功能，使我们能够动态生成CSS规则，减少重复代码，提高代码的复用性。本章将深入探讨 Less 中的循环，包括 for 循环和 while 循环，以及如何利用这些循环来简化样式表。
for 循环
for 循环是一种常用的循环类型，用于执行固定次数的操作。Less 提供了两种形式的 for 循环：@{i} 形式和 @{i}..@{j} 形式。这两种形式都允许我们指定一个范围，并在此范围内执行一系列操作。
使用 @{i} 形式
@{i} 形式允许我们指定一个变量 i 的起始值和终止值。在循环体内，我们可以使用这个变量来生成不同的CSS规则。
-- -------------------- ---- -------
-- ------ -------------- -
------- --
-- -- --- --------- ---
---------------- ---- ------- -- -- -
------------- -
------ ------
------- ------
----------------- --------- -- -- ------ - -----
-
-- -----
--------------- - ---
-
-- ----
-----------------在这个例子中，我们定义了一个名为 .forLoop 的循环，它会在 @index 小于或等于5时执行。每次循环，都会生成一个新的 .div-@{index} 类，其背景色会根据 @index 的值变化。
使用 @{i}..@{j} 形式
@{i}..@{j} 形式则允许我们直接指定一个范围，而不需要显式地递增索引值。
-- -------------------- ---- -------
-- -- --- --------- ---
---------------- ----- ---- ------- -- ----- -
------------- -
------ ------ - -----
------- ------ - -----
----------------- ------- -- ---- -----
-
-- -------
---------------- - --- ------
-
-- ----
----------- ---在这个例子中，我们定义了一个 .forLoop 循环，它接受两个参数 @start 和 @end，并在 @start 小于或等于 @end 时执行。每次循环，都会生成一个新的 .div-@{start} 类，其宽度和高度根据 @start 的值变化。
while 循环
while 循环与 for 循环类似，但它的条件是在循环开始时检查的。如果条件为真，则执行循环体；如果条件为假，则跳过循环体。这使得 while 循环更加灵活，可以处理更复杂的逻辑。
使用 while 循环
-- -------------------- ---- -------
-- ------ ---------------- -
--------- --
-- -- ----- --------- ---
------------ ---- --------- -- -- -
--------------- -
------ ------
------- ------
------- --- ----- ------- ---- -- -----
-
-- -----
--------- -------- - --
-- ------
-------------
-
-- ----
-------------在这个例子中，我们定义了一个名为 .whileLoop 的循环，它会在 @counter 小于或等于5时执行。每次循环，都会生成一个新的 .div-@{counter} 类，其边框颜色会根据 @counter 的值变化。
总结
通过本章的学习，我们了解了 Less 中的循环结构及其应用场景。for 循环和 while 循环都是强大的工具，可以帮助我们生成动态的CSS代码。无论是生成一系列具有相同属性但不同值的元素，还是处理更复杂的逻辑，Less 都提供了足够的灵活性和功能。希望读者能够掌握这些技巧，并在实际项目中运用它们，从而写出更高效、更优雅的CSS代码。