LESS 是一种 CSS 预处理器，它为我们提供了更强大的 CSS 编写能力，其中之一就是循环语句。循环语句可以帮助我们减少代码冗余，提高代码复用率。本文将为大家详细介绍 LESS 中的循环语句，并提供示例代码作为参考。
什么是循环语句
循环语句是一种常见的编程控制结构，可以在代码执行过程中重复执行某个代码块。在 LESS 中，循环语句的作用是可以使一段代码重复执行指定的次数或者遍历一个指定范围内的数值，从而实现书写简单、优雅的样式表。
如何使用循环语句
LESS 中的循环语句有两种写法，一种是 for 循环，用于循环执行指定次数的代码块；另一种是 each 循环，用于遍历一个指定的列表。
for 循环
for 循环的语法格式如下：
-- -------------------- ---- -------
------- -- -- ---
----- -- -- ---
------ -- -- --
------
-----------
-- ---
-
-其中，@start、@end 和 @step 都是需要依据实际情况定义的变量，表示循环起始值、循环终止值和循环步长。@i 是一个计数器，代表当前循环执行的次数。
我们可以将这段代码翻译成以下语言：
从 @start 开始，每隔 @step 的距离循环一次，直到循环到 @end 停止。每次循环都会生成一个类名为 .item-@{i} 的 CSS 类，并在其中插入一段代码块。其中的 @i 表示循环执行的次数。
接下来，我们通过一个具体的示例来详细介绍 for 循环的应用。
示例
在日常开发中，我们经常需要根据设计稿中的颜色搭配，生成配色方案。
假设我们要生成一组主题颜色和辅助颜色，颜色数量为 6。
我们可以通过 for 循环来实现：
-- -------------------- ---- -------
------- --
----- --
------- ----- -- ---
-------- ----- ----- ----- ----- ----- ----- -- ------
------
------------
------ ---------------------------
-
---------
----------------- --------------------------------
-
-在上面的代码中，我们定义了两个类名分别为 .color 和 .bg。通过 for 循环，生成了 6 个类名为 .color-1 到 .color-6 以及 .bg-1 到 .bg-6 的样式类。
以 .color 类名为例，循环每执行一次，就会生成一个类名为 .color-@{i} 的 CSS 类，同时应用 lighten 函数，让颜色逐渐变浅，最终生成 6 个颜色梯度。
each 循环
each 循环相比 for 循环更加灵活，它可以循环遍历一个定义的列表，并在每个列表项上执行指定的代码块。each 循环的语法格式如下：
@list: value1, value2, value3, ...;
.each(@list){
.item-@{value}{
// ...
}
}其中，@list 是定义的列表，可以是逗号隔开的字符串或者数组。在循环体中，可以通过 @value 变量获取当前的列表项值。每次循环都会生成一个类名为 .item-@{value} 的 CSS 类，并在其中插入一段代码块。
我们同样举一个具体的示例来详细介绍 each 循环的应用。
示例
在日常开发中，我们常常需要在输入框和按钮之间加入半角空格，以提高页面的美观性。
我们可以通过 each 循环来实现：
-- -------------------- ---- -------
-------- - -- -- ------
---------- ------ ------- --------- -- -------------
-----------------
- ---------
-- -----------
-------- -
-------- --------
------------- ----
-
-
-在上面的代码中，我们定义了一个变量 @spacer 表示半角空格，以及一个变量 @elements 表示需要添加空格的元素列表。
在 each 循环中，我们对 @elements 进行遍历，并在每个元素上生成一个类名为 .@{value} 的 CSS 类。在该类名下，我们为当前元素的 before 伪类添加了一个空格，使输入框和按钮之间留出 5 像素的间隔。
总结
在 LESS 中，循环语句是一种强大的工具，可以帮助我们提高代码复用率，减少代码冗余，从而优化样式表结构。通过本文的介绍，希望能让大家更加深入地了解 LESS 的循环语句用法，并在实际开发中灵活运用，提高前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e03da2f6b2d6eab3b5186a