在日常前端开发中，CSS 是一个必备的技能。但是，CSS 的样式往往是不可复用的，需要重复编写，这样不仅使代码冗长，也难以维护。而 LESS 作为 CSS 的预处理器，可以通过使用遍历生成样式的方式，来实现样式的复用和维护。
LESS 遍历语法
LESS 中，使用 @foreach 语法来实现遍历。@foreach 语法的语法格式如下：
@forEach @variable in @list {
// LESS
}其中，@variable 是变量名称，可以在循环体中使用。@list 是一个列表或一组值。
LESS 遍历实例
下面我们通过一个实例来演示如何使用遍历在 LESS 中生成样式。
我们需要给一组按钮添加样式，这些按钮的背景颜色依次为 red，blue，green。我们可以用 @foreach 遍历来实现：
@buttons: red, blue, green;
@forEach @button in @buttons {
.btn-@{button} {
background-color: @button;
}
}在上面的代码中，我们首先定义一个 @buttons 变量，包含三个颜色值。然后使用 @foreach 遍历，将 @button 作为变量，循环遍历 @buttons 中每一个元素。在循环体中，我们可以使用变量 @button 来访问当前按钮的颜色值，然后为对应的按钮添加样式。
输出结果
-- -------------------- ---- ------- -------- - ----------------- ---- - --------- - ----------------- ----- - ---------- - ----------------- ------ -
遍历嵌套
有时候我们需要多次遍历来生成复杂的样式，这时候可以使用多层嵌套的 @foreach 语法。一个经典的例子就是网格样式，我们需要根据行数和列数来生成相应数量的网格。
我们可以使用下面的代码来实现：
-- -------------------- ---- -------
---- -- ---- - -- - -
--------- -
---- -- ---- - -- - -
--------- -
----------------- ------------- -- - -----
-
-
-
-在上述代码中，我们使用两个嵌套的 @for 循环，分别表示行和列。在循环体中，我们可以使用 darken() 函数对颜色进行处理，然后为对应的网格添加样式。
输出结果
-- -------------------- ---- ------- ------ ------ - ----------------- -------- - ------ ------ - ----------------- -------- - ------ ------ - ----------------- -------- - ------ ------ - ----------------- -------- - ------ ------ - ----------------- -------- - ------ ------ - ----------------- -------- - ------ ------ - ----------------- -------- - ------ ------ - ----------------- -------- - ------ ------ - ----------------- -------- - ------ ------ - ----------------- -------- - ------ ------ - ----------------- -------- - ------ ------ - ----------------- -------- - ------ ------ - ----------------- -------- - ------ ------ - ----------------- -------- - ------ ------ - ----------------- -------- - ------ ------ - ----------------- -------- -
总结
LESS 中使用遍历生成样式，可以非常方便地实现样式的复用和维护。使用 @foreach 或 @for 语法是实现遍历的关键，通过嵌套循环，我们也可以实现更加复杂的样式效果。希望你通过本文的介绍，掌握 LESS 遍历的用法，并且能够在具体项目中灵活运用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b35f2748841e9894fa3d6f