srcminiLess Loops语句使你可以多次执行一个语句或一组语句。这些递归循环结构是在与Guard表达式和模式匹配结合使用递归mixin时创建的。
让我们举一个例子来了解Less中Loops的工作原理。
创建一个名为” simple.html”的HTML文件, 其中包含以下数据。
HTML档案：simple.html
<article>
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="simple.css" type="text/css" />
</head>
<body>
<div class="cont">
<h2>Welcome to srcmini</h2>
<p>A solution of all technology.</p>
</div>
</body>
</html>现在创建一个名为” simple.less”的文件。它类似于CSS文件。唯一的区别是它以” .less”扩展名保存。
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;
}输出
评论前必须登录！
注册