📌  相关文章
📜  LESS-循环

📅  最后修改于: 2020-10-22 07:11:39             🧑  作者: Mango

 

在本章中，我们将了解Loops如何在LESS中工作。循环语句允许我们多次执行一个语句或一组语句。当递归mixin与Guard表达式和模式匹配结合使用时，可以创建各种迭代/循环结构。

例

以下示例演示了LESS文件中循环的使用-

loop_example.htm


   

   
      

         
Welcome to TutorialsPoint

         
The largest Tutorials Library on the web.

接下来，创建style.less文件。

无样式

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

div {
   .cont(7);
}

您可以使用以下命令将style.less文件编译为style.css-

lessc style.less style.css

执行以上命令；它将使用以下代码自动创建style.css文件-

style.css

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

输出

请按照以下步骤查看上面的代码如何工作-

  • 将上面的html代码保存在loop_example.htm文件中。
  • 在浏览器中打开此HTML文件，将显示以下输出。

更少的CSS Guard