@for指令使用关键字，指定从<start>值到<end>值之前的值的范围。
@for $var from <start> to <end>
下面简要解释语法。
$var: 它表示变量的名称，如$ i。
<start> 和 <end>: 这些是SassScript表达式，将返回整数。如果<start>大于<end>，则计数器变量递减，当<start>小于<end>时，计数器变量递增。
以下示例演示如何将@for指令与to关键字配合使用：
<html> <head> <title>Control Directives & Expressions</title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <p class="p1">This is line one.</p> <p class="p2">This is line two.</p> <p class="p3">This is line three.</p> <p class="p4">This is line four.</p> </body> </html>
接下来，创建文件style.scss。
@for $i from 1 to 4 { .p#{$i} { padding-left : $i * 10px; } }
您可以通过使用以下命令让SASS查看文件，并在SASS文件更改时更新CSS：
sass --watch C:rubylibsassstyle.scss:style.css
接下来执行上面的命令，它将自动创建style.css文件用下面的代码：
.p1 { padding-left: 10px; } .p2 { padding-left: 20px; } .p3 { padding-left: 30px; }
让我们执行以下步骤，看看上面的代码如何工作：
将上述html代码保存在@ for_to.html文件中。
在浏览器中打开此HTML文件，将显示如下输出。
描述LESS中的颜色定义函数使定义和操作颜色变得超级简单，使用颜色函数可以帮助你控制颜色、更好地配色。LESS提供了许多有用的颜...
UI /主题框架和组件LESS支持下表中列出的一些UI /主题框架:S.N.框架和描述11pxdeep 它是平的Bootstrap 3主题，提供强大的配色方...
如今我们的网站、页面更加需要注重细节，不论是字体的样式、还是图片的分辨率清晰度都会影响到用户的访问体验和 PV，以及用户以...
CSS渐变是CSS3图像模块中添加的新类型的图像。CSS渐变允许您在两个或多个指定颜色之间显示平滑过渡。浏览器支持两种类型的渐变：...
HTML button 标签form 属性可以规定 button 元素属于哪个表单，请参考下述示例：实例位于表单之外的提交按钮(但是仍然是表单中的...
