在前端开发中，样式是不可或缺的一部分。我们通常使用 CSS 来控制网页的显示效果，而 LESS 是一种预处理语言，它扩展了 CSS 的功能，让我们更加方便地编写样式。其中，使用循环来生成样式是 LESS 的一项重要功能。
LESS 中的循环
LESS 中提供了两种循环方式：
- for 循环
- each 循环
for 循环用于生成一段固定次数的样式，而 each 循环用于遍历数组或对象，并生成相应的样式。
for 循环
for 循环语法如下：
-- -------------------- ---- -------
----- ---
-- -- -- ---
------------- ---- --- - -- -
---------- -
------ ---- - ---
------- ---- - ---
-
------------ - ---
-
----------------上述代码中，我们定义了一个变量 @num，并以此为循环次数，使用 .for-loop 函数来生成 .item-1 到 .item-10 的样式。.for-loop 函数会在 @n 大于 0 时递归调用自身，直到 @n 的值为 0，停止循环。
each 循环
each 循环语法如下：
-- -------------------- ---- -------
-------- -------- -------- --------
-- ----------
----------------- -
--------------- -- ---- --- -- -------------- -
------- -------------- ----
----------- -
------ -------
----------------- --------------- -----
-
-------------- - ---
-
-
-- -- ---- --
--------------------上述代码中，我们定义了一个颜色数组 @colors，使用 .each-loop 函数来遍历该数组，并使用 .color-loop 函数生成 .color-1 到 .color-3 的样式。.color-loop 函数会在 @i 小于等于 length(@list) 时递归调用自身，并通过 extract 方法获取数组中指定位置的值。
循环中的计算
除了使用循环来生成样式，我们还可以在循环中进行计算，以便更加灵活地控制样式。
下面是一个通过循环计算生成样式的示例：
-- -------------------- ---- -------
--------- -----
----- --
------------- ---- --- - -- -
------- ----- - -------- - - - ----- - -- - ---
---------- -
------ -------
------- -------
------- ---------
----------------- -----
-
------------ - ---
-
----------------上述代码中，我们定义了一个变量 @padding，以及一个变量 @num 作为循环次数，使用 .for-loop 函数来生成 .item-1 到 .item-5 的样式。每次循环时，我们通过 @num 减去当前循环次数再加 1 来计算 @width 的值，以生成不同宽高的框。同时，我们通过 @padding 来控制外边距，使生成的框能够紧密排列。
总结
使用循环来生成样式能够大大提高代码的复用性和可维护性，减少编码工作量。通过 LESS 的循环功能，我们可以快速生成一系列样式，同时还可以在循环中进行计算，以便更加灵活地控制样式。希望这篇文章能够帮助你更好地理解 LESS 的循环功能，并在实际项目中应用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64bf7dc19e06631ab9bdd300