LESS 是一种预处理器语言，扩展了 CSS，并且使得 CSS 更加灵活和易于维护。LESS 中的 for 循环是一种非常强大的工具，可以方便地生成重复的代码，并且可以用于处理非常复杂的样式表。本文将介绍 LESS 中的 for 循环的使用方法。
for 循环的基本语法
LESS 中的 for 循环有两种语法：
使用
@for关键字，用于循环一个固定次数。@for @i from 1 to 10 { // 循环体 }
使用
each关键字，用于循环一个列表。@each @var in @list { // 循环体 }
对于第一种语法，@i 是循环计数器，它可以在循环体中使用。from 和 to 关键字指定循环的起始和结束值（不包括结束值）。
对于第二种语法，@var 是列表中的每一个元素，@list 是一个列表。循环体可以使用 @var 来代表列表中的元素。
for 循环的应用
循环生成样式
使用 for 循环可以方便地生成样式，特别是在需要生成大量相似的样式（例如网格系统）时非常有用。
例如，下面的代码可以生成一个包含 12 个网格的栅格系统（每个网格的宽度为 8.333333%）：
-- -------------------- ---- ------- -------------- --- ------- ------- ------- ------- ------- ------- ------- ------- ------- -------- -------- ------- - ------ ----- - ---- -- ---- - -- ------------- - --------- - ------ --- - ------------- - ------ - -展开代码
上面的代码使用了 LESS 的插值语法，即在字符串中插入变量或表达式。@{i} 表示使用 @i 定义的变量。
循环操作列表
使用 each 关键字可以轻松操作列表。
例如，下面的代码可以给一个带有多个图标的列表添加样式：
-- -------------------- ---- ------- ------- ----- ----- ---- ----- ----- -- - -------- ------------- -------- ----- - ----- ----- -- ------ - ------------- - ----------------- ------------------- - -展开代码
上面的代码可以生成下面的 HTML：
<ul> <li class="icon-home"></li> <li class="icon-user"></li> <li class="icon-cog"></li> <li class="icon-file"></li> <li class="icon-plus"></li> </ul>
循环嵌套
在 LESS 中，可以将一个循环嵌套在另一个循环中。
例如，下面的代码可以生成一个二维网格系统：
-- -------------------- ---- ------- -------------- --- ----------- -- ---- -- ---- - -- ---------- - --------- - ---------- -------- - -------- --- -------- ------ ------ ----- - ---- -- ---- - -- ------------- - --------- - ------ ----- ------ --- - ------------- - ------ - - - -展开代码
上面的代码使用了嵌套循环，生成了一个有 6 行 12 列的网格系统。在其中，循环 @i 用于生成行，循环 @j 用于生成列。
结语
LESS 中的 for 循环是一种非常强大的工具，可以方便地生成重复的代码，并且可以用于处理非常复杂的样式表。本文介绍了 for 循环的基本语法和应用，希望读者可以通过这篇文章学习和掌握 LESS 中的 for 循环用法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b6c8f4306f20b3a630c458
