LESS 是一种 CSS 预处理器，它为 CSS 增添了许多有用的特性，包括变量、嵌套规则、混合、循环等。其中，循环语句是一种非常有用的功能，可以帮助我们快速生成重复的样式。
循环语句的基本语法
LESS 中的循环语句有两种形式：for 循环和 while 循环。其中，for 循环比较常用，它的基本语法如下：
------------ --- ----- -------- ---- ------- - -- - -- --- ------------ - --- - ----- --------------
其中，@iterations 是循环次数，.loop 是循环体，@index 是循环变量。在循环体中，我们可以使用 @index 来控制循环次数，从而实现重复的样式生成。
使用循环语句生成重复的样式
下面，我们来看一个例子，使用循环语句生成重复的样式。假设我们要生成一组带有不同颜色的按钮，每个按钮的颜色都是从一个预定义的颜色列表中随机选择的。我们可以使用循环语句和 LESS 的 color 函数来实现：
-------- ----- ----- ----- ----- ----- -----
-------------------- ---- ------- - -- -
---------------- -
----------------- ---------------- --------
-
------------------- - ---
-
------------------------------在上面的例子中，我们定义了一个颜色列表 @colors，然后使用 .button-loop 循环体来生成不同颜色的按钮样式。在循环体中，我们使用了 LESS 的 extract 函数来获取颜色列表中指定位置的颜色值，并将其赋值给 background-color 属性。
总结
循环语句是 LESS 中非常有用的功能，可以帮助我们快速生成重复的样式。在使用循环语句时，我们可以使用变量和函数来控制循环次数和循环体的内容。通过不断练习和实践，我们可以更加熟练地使用循环语句，提高我们的编程效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/660d8eedd10417a222de090d