LESS- 循环

LESS循环 - 从简单和简单的步骤开始，从简单和简单的步骤学习，包括概述，安装，嵌套规则，嵌套指令和冒泡，操作，转义，函数，命名空间和访问器，范围，注释，导入，变量，扩展，Mixins，Parametric Mixins，Mixins作为函数，将规则集传递给Mixins，导入指令，导入选项，Mixin Guards，CSS Guards，循环，合并，父选择器，其他函数，字符串函数，列表函数，数学函数，类型函数，颜色定义函数，颜色通道函数，颜色操作，颜色混合函数，命令行用法，在浏览器中使用较少，浏览器支持，插件，编程用法，在线编译器，GUI，编辑器和插件，第三方编译器，框架。

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

示例

以下示例演示了在LESS文件中使用循环 :

loop_example.htm

                              Welcome to TutorialsPoint
         The largest Tutorials Library on the web.

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

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文件，将显示以下输出.

Less css guard