如何在 LESS 中创建循环结构？

循环是一种允许我们多次使用特定语句的编程方法。 LESS 循环为我们提供了同样的便利。在 LESS 中，循环是使用递归混合以及保护表达式和模式匹配创建的。我们必须按照以下步骤在 LESS 中创建循环。

• 对 mixin 的主要调用：需要对 mixin的主要调用才能开始迭代。就像在其他编程语言中一样，我们初始化循环变量的值以开始循环，类似地，这个主调用在 LESS 中充当初始化器。
• Mixin with guard 表达式： Guard 充当循环中的条件。它告诉循环何时必须终止。
• 使 mixin 递归：mixin中需要一个语句来使其递归。就像其他编程语言一样，参数可以在传递给下一次迭代的函数时递增或递减。
• 要重复的语句：然后是需要重复的语句。这些语句写在循环结构内。

让我们看一个 LESS 中的循环示例。

示例：我们将使用循环编写我们的 LESS 代码。

file.less

.temp (@var) when (@var > 0) {
  .st-@{var} {
    font-size : (10px * @var);
  }
  .temp(@var - 1);
}
.temp(3);

这个更少的代码可以编译成 CSS 使用以下命令编写代码：

lessc file.less file.css

CSS 输出：这将生成以下等效的 CSS 代码：

文件.css

.st-3 {
    font-size: 30px;
}
  
.st-2 {
    font-size: 20px;
}
  
.st-1 {
    font-size: 10px;
}

现在让我们编写一个 HTML 代码来使用上面的 CSS 文件。

索引.html

  

    

  

    

        
Welcome To GFG
        

            GeeksforGeeks is a platform
            for learning enthusiasts.
        
  
        

            Computer Science Portal.
        
    

  

输出：