LESS 是一种动态的样式语言，它扩展了普通的 CSS，让我们可以使用变量、函数、运算符、Mixin（混合）和循环等高级特性来编写连续的 CSS 代码。其中，for 循环功能是 LESS 中最强大的部分之一，它为开发者提供了一种有效地重复样式定义的方式。
LESS for 循环语法
在 LESS 中，可以使用 for 循环来遍历数字序列。for 循环语法的基本语法如下：
@var: 10;
.for-loop(@counter) when (@counter > 0) {
.selector-@{counter} {
color: red;
}
.for-loop(@counter - 1);
}
.for-loop(@var);在上面的示例代码中，使用 .for-loop 递归函数的方式来实现 for 循环。其中 @var 为循环的次数，当满足条件时，会自动调用 .selector-@{counter} 样式定义，即生成了 @counter 个样式规则，例如：
-- -------------------- ---- ------- ------------ - ------ ---- - ----------- - ------ ---- - ----------- - ------ ---- - ---
LESS for 循环应用
for 循环在 LESS 中的应用非常广泛，本文将以两个示例来说明循环在前端 CSS 开发中的应用。
1. 创建字体大小的等差数列
在网页设计中，往往需要以等差数列的方式呈现字体的大小，此时可以使用 for 循环来实现。例如，我想要从字体大小 12px 开始，每隔 2px 增加一次，直到字体大小 24px。在 LESS 中，可以这样写：
-- -------------------- ---- -------
---------- -
------ --
----- ---
------- ---
-------------- ------- ---- --- -- ----- -
---------- -- - ---
------------- - -------
-
-------------------
-2. 创建样式表的嵌套结构
在 LESS 中，可以使用 for 循环来生成样式表的嵌套结构，以达到代码组织的效果。例如，我想要一次性定义 10 个块状元素，并按顺序从左到右排列，可以使用下面的代码：
-- -------------------- ---- -------
------- -
------------------ ---- --- - -- -
---------------------- -
------ ------
------- ------
----------------- ------------ -- - ----
------ -----
-
----------------- - ---
-
-------------------
-这个代码生成了 10 个具有相同样式的 .block 元素，并分别分配不同的背景颜色。
总结
LESS 的 for 循环功能能够非常方便地生成具有相同样式的元素、属性值等，并使得代码更加抽象，更加灵活，让前端开发者能够更加专注地处理业务逻辑。希望通过本文的介绍，读者可以更好地使用 LESS 中的 for 循环功能，并应用于实际开发中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65af5084add4f0e0ff8ba2dd