LESS 是一种 CSS 预处理器，它可以让我们使用类似编程语言的方式来编写 CSS。其中，for 循环是一种非常强大的功能，可以帮助我们快速创建复杂的 CSS 样式。本文将详细介绍 LESS 中如何使用 for 循环创建复杂的 CSS 样式，并提供示例代码和指导意义。
1. for 循环的基本语法
在 LESS 中，for 循环的基本语法如下：
@for @index from <start> to <end> {
// 循环体
}其中，@index 表示当前循环次数的变量名，<start> 和 <end> 分别表示循环的起始值和结束值。在循环体中，我们可以使用 @index 变量来表示当前循环次数。
下面是一个简单的示例，使用 for 循环生成 5 个不同的颜色：
@for @i from 1 to 6 {
.color-@{i} {
background-color: hsl((@i - 1) * 60, 70%, 50%);
}
}在上面的示例中，我们使用了 @i 变量来表示当前循环次数，@{i} 则表示将 @i 变量的值插入到字符串中。通过循环生成了 5 个不同的颜色，分别是 .color-1 到 .color-5。
2. for 循环的高级用法
除了基本的循环语法外，LESS 中的 for 循环还有一些高级用法，可以帮助我们更加灵活地生成 CSS 样式。
2.1. 使用 step 指定循环步长
在 for 循环中，我们可以使用 step 关键字来指定循环的步长。例如，下面的示例使用 for 循环生成了一个 10 行 10 列的方格：
-- -------------------- ---- -------
----- -
-------- -----
---------- -----
----- -
------ ----
------- -----
------- --- ----- -----
-
---- -- ---- - -- --- ---- - -
---------- -
------- -
-------- -------
-
-
-
-在上面的示例中，我们使用了 step 1 来指定循环的步长为 1，从而生成了 100 个 .cell 元素，分别是 .cell-1 到 .cell-100。通过 :after 伪元素为每个元素添加了一个文本内容，方便我们观察循环结果。
2.2. 使用 in 指定循环对象
在 for 循环中，我们还可以使用 in 关键字来指定循环的对象。例如，下面的示例使用 for 循环生成了一个包含多个字体大小的样式表：
-- -------------------- ---- -------
----------- -
------- ---- ---- ---- ---- -----
--------- ---- --- -- --------------- -
------ --------------- ----
------------- -
---------- ------
-
-------- - ---
-
---------
-在上面的示例中，我们使用了 @sizes 变量来存储所有的字体大小，使用 length 函数获取了字体大小的数量。然后，我们定义了一个 .size 混合宏，使用 extract 函数获取指定位置的字体大小，并生成对应的样式。
通过这种方式，我们可以轻松地生成多个字体大小的样式表，而不需要手动编写每个样式。
3. 总结
通过本文的介绍，我们了解了 LESS 中如何使用 for 循环创建复杂的 CSS 样式。除了基本的循环语法外，我们还介绍了 for 循环的高级用法，包括使用 step 指定循环步长和使用 in 指定循环对象。这些技巧可以帮助我们更加灵活地生成 CSS 样式，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66036fead10417a222fd588c