LESS 如何使用循环

LESS 是一种动态样式语言，与 CSS 相似，但比 CSS 更加强大和灵活。LESS 中循环语句的使用可以帮助开发者减少重复的代码，提高代码的复用性。本文将为大家介绍 LESS 中如何使用循环语句。

for 循环的使用

LESS 中使用 for 循环语句的格式如下：

.for (@var, @limit) {
  .loop (@i) when (@i <= @limit) {
    // 循环体
    .loop(@i + 1);
  }
  .loop(1);
}

上面的代码中，@var 是循环变量，@limit 是循环次数。在循环体内可以使用 @i 表示循环的当前次数。

例如，使用 for 循环生成 5 个盒子的样式：

// javascriptcn.com 代码示例
.for (@i, 5) {
  .box-@{i} {
    width: 50px;
    height: 50px;
    background-color: #ccc;
    float: left;
  }
  .loop(@i + 1);
}

上述代码会生成以下 CSS 代码：

// javascriptcn.com 代码示例
.box-1 {
  width: 50px;
  height: 50px;
  background-color: #ccc;
  float: left;
}
.box-2 {
  width: 50px;
  height: 50px;
  background-color: #ccc;
  float: left;
}
.box-3 {
  width: 50px;
  height: 50px;
  background-color: #ccc;
  float: left;
}
.box-4 {
  width: 50px;
  height: 50px;
  background-color: #ccc;
  float: left;
}
.box-5 {
  width: 50px;
  height: 50px;
  background-color: #ccc;
  float: left;
}

可以看到，使用循环可以生成多个盒子的样式，避免了重复的代码。

while 循环的使用

除了 for 循环，LESS 还支持 while 循环。while 循环和 for 循环类似，区别在于循环体内的实现方式。

.while (@condition) when (@condition) {
  // 循环体
}

例如，使用 while 循环实现逐步加深的字体颜色：

@color: #000;
.while (@color <= #fff) when (@color <= #fff) {
  .step-@{color} {
    color: @color;
  }
  @color: lighten(@color, 10%);
}

上述代码会生成以下 CSS 代码：

// javascriptcn.com 代码示例
.step-#000000 {
  color: #000;
}
.step-#1a1a1a {
  color: #1a1a1a;
}
.step-#333333 {
  color: #333333;
}
.step-#4d4d4d {
  color: #4d4d4d;
}
.step-#666666 {
  color: #666666;
}
.step-#808080 {
  color: #808080;
}
.step-#999999 {
  color: #999999;
}
.step-#b3b3b3 {
  color: #b3b3b3;
}
.step-#cccccc {
  color: #cccccc;
}
.step-#e6e6e6 {
  color: #e6e6e6;
}
.step-#ffffff {
  color: #ffffff;
}

可以看到，使用 while 循环可以实现逐步修改的效果。

总结

循环语句是 LESS 中必不可少的一部分，可以大大提高代码的复用性和效率。以上是 for 循环和 while 循环的使用方法及示例，希望对大家学习 LESS 有所帮助。

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