如何在Less中使用循环来生成重复样式？

在Less中，可以使用循环来生成重复样式，这样可以减少代码量，提高开发效率。

一、@for循环

使用@for循环可以在Less中实现循环生成样式的功能。@for循环的语法如下：

@for @var {起始值} to {结束值} {
  // 循环体
}

其中，@var是一个变量，起始值和结束值是循环的范围。

例如，我们要生成1到5的重复样式：

@for @i 1 to 5 {
  .item-@{i} {
    width: 100px * @i;
  }
}

上述代码中，使用@i作为循环变量，循环范围是1到5。在循环体内，通过@{i}来引用循环变量，实现样式的生成。

二、@while循环

除了@for循环，Less还提供了@while循环来实现循环生成样式的功能。@while循环的语法如下：

@while {条件} {
  // 循环体
}

其中，{条件}是一个判断条件，只要满足条件，就会执行循环体。

例如，我们要生成1、3、5、7、9的重复样式：

@i: 1;
@while (@i <= 9) {
  .item-@{i} {
    width: 100px * @i;
  }
  @i: @i + 2;
}

上述代码中，使用@i作为循环变量，初始值为1，每次循环增加2。通过判断@i是否小于等于9来控制循环的结束。

通过@for循环和@while循环，我们可以在Less中灵活地使用循环来生成重复样式，提高开发效率。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

• 上一篇： 如何在Less中引入外部的Less文件？
• 下一篇： 如何在Less中创建带有默认参数的混合？