更少的循环

Less Loops语句使您可以多次执行一个语句或一组语句。这些递归循环结构是在与Guard表达式和模式匹配结合使用递归mixin时创建的。

让我们举一个例子来了解Less中Loops的工作原理。

创建一个名为“ simple.html”的HTML文件，其中包含以下数据。

HTML档案：simple.html

   



   
Welcome to JavaTpoint
   
A solution of all technology.

现在创建一个名为“ simple.less”的文件。它类似于CSS文件。唯一的区别是它以“ .less”扩展名保存。

更少的文件：simple.less

.cont(@count) when (@count > 0) {
  .cont((@count - 1));
  width: (25px * @count);
}
div {
  .cont(7);
}  

将文件“ simple.html”和“ simple.less”都放在Node.js的根文件夹中

现在，执行以下代码： lessc simple.less simple.css

这将编译“ simple.less”文件。将生成一个名为“ simple.css”的CSS文件。

例如：

生成的CSS“ simple.css”具有以下代码：

div {
  width: 25px;
  width: 50px;
  width: 75px;
  width: 100px;
  width: 125px;
  width: 150px;
  width: 175px;
}

输出：