Less 教程
- 第1节：Less 安装
- 第2节：Less 嵌套规则
- 第3节：Less 操作
- 第4节：Less 转义
- 第5节：Less 函数
- 第6节：Less 命名空间和访问器
- 第7节：Less 变量范围
- 第8节：Less 注释
- 第9节：Less 导入
- 第10节：Less 变量
- 第11节：Less 扩展
- 第12节：Less 混合
- 第13节：Less 混合参数
- 第14节：Less Mixins函数
- 第15节：Less 将规则集传递给Mixins
- 第16节：Less 导入指令
- 第17节：Less 导入选项
- 第18节：Less Mixin Guards
- 第19节：Less CSS Guards
- 第20节：Less 循环
- 第21节：Less 合并
- 第22节：Less 父选择器
- 第23节：Less 其他函数
- 第24节：Less 字符串函数
- 第25节：Less 列表函数
- 第26节：Less 数学函数
- 第27节：Less 类型函数
- 第28节：Less 颜色定义函数
- 第29节：Less 颜色通道函数
- 第30节：Less 颜色操作
- 第31节：Less 颜色混合函数
- 第32节：Less 命令行用法
- 第33节：Less 在浏览器中使用
- 第34节：Less 浏览器支持
- 第35节：Less 插件
- 第36节：Less 程序化使用
- 第37节：Less 在线编译器
- 第38节：Less GUIs
- 第39节：Less 编辑器和插件
- 第40节：Less 第三方编译器
- 第41节：Less 框架
Less 循环
Loops语句允许我们多次执行一个语句或一组语句。 当递归mixin与 Guard表达式和模式匹配组合时，可以创建各种迭代/循环结构。
例子
下面的例子演示了在LESS文件中使用循环:
loop_example.htm
<!doctype html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="cont">
<h2>Welcome to test</h2>
<p>The largest Tutorials Library on the web. </p>
</div>
</body>
</html>
接下来，创建文件 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;
}