LESS 中的循环（Loop）使用案例及代码示例

LESS 是一种 CSS 预处理器，它提供了很多有用的功能，其中之一就是循环（Loop）。循环可以让我们在 LESS 中更加灵活地使用变量和 mixin，提高了代码的复用性和可维护性。本文将介绍 LESS 中的循环使用案例及代码示例，帮助大家更好地理解和应用循环。

基本语法

LESS 中的循环语法类似于 JavaScript 中的 for 循环，它有三个关键字：@for、from 和 to。@for 表示循环开始，from 和 to 表示循环的范围。具体语法如下：

@for @index from @start to @end {
  // 循环体
}

其中，@index 表示当前循环的次数，@start 和 @end 表示循环的起始和结束位置，可以是数字或变量。

案例分析

生成多行渐变背景

我们可以利用循环生成多行渐变背景，如下所示：

// javascriptcn.com 代码示例
.gradient-background(@n, @start-color, @end-color) {
  @step: (100% / @n);
  background: linear-gradient(to bottom, @start-color, @end-color);
  @for @i from 2 to (@n + 1) {
    .gradient-@{i} {
      background: linear-gradient(to bottom, @start-color, @end-color);
      background-position: 0 (@step * (@i - 2));
    }
  }
}

.gradient-background(5, #000, #fff);

上面的代码定义了一个 mixin，它接受三个参数：@n 表示渐变的行数，@start-color 和 @end-color 分别表示起始颜色和结束颜色。在 mixin 中，我们先计算出每行渐变的步长 @step，然后生成第一行渐变背景，并使用 @for 循环生成剩余的渐变背景，同时设置它们的背景位置。最后，我们可以调用这个 mixin，并传入参数，生成多行渐变背景。

生成多列等宽布局

我们可以利用循环生成多列等宽布局，如下所示：

// javascriptcn.com 代码示例
.column-layout(@n, @width) {
  width: (@n * @width);
  margin: 0 auto;
  @for @i from 1 to (@n + 1) {
    .column-@{i} {
      width: @width;
      float: left;
      &:last-child {
        margin-right: 0;
      }
    }
  }
}

.column-layout(3, 33.33%);

上面的代码定义了一个 mixin，它接受两个参数：@n 表示列数，@width 表示每列的宽度。在 mixin 中，我们先计算出整个布局的宽度，然后使用 @for 循环生成每一列，设置它们的宽度和浮动属性。最后，我们可以调用这个 mixin，并传入参数，生成多列等宽布局。

总结

LESS 中的循环可以帮助我们更加灵活地使用变量和 mixin，提高了代码的复用性和可维护性。本文介绍了 LESS 中的循环语法和两个使用案例，希望能够帮助大家更好地理解和应用循环。在实际开发中，我们可以根据具体需求，灵活运用循环，提高代码效率和质量。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65699e01d2f5e1655d22d7f9