该@for指令允许你生成一个循环的风格。counter变量用于设置每次迭代的输出。
该@for指令有两种类型的如下面给出的表。
through
描述
所述@for指令使用所述关键字,通过指定包括这两个值的范围内<start>和<END> 。
语法
@for $var from <start> through <end>
语法简要说明如下-
- $ var-它代表变量的名称,如$ i。
- <start>和<end> -这些是SassScript表达式,将返回整数。如果<start>大于<end>,则计数器变量递减,而当<start>小于<end>时,计数器变量将递增。
例
以下示例演示了如何将@for指令与through关键字一起使用。
<html> <head> <title>Control Directives & Expressions</title> <link rel = "stylesheet" type = "text/css" href = "style.css"/> </head> <body> <p class = "p1">This is first line.</p> <p class = "p2">This is second line.</p> <p class = "p3">This is third line.</p> <p class = "p4">This is fourth line.</p> </body> </html>
接下来,创建文件style.scss。
style.scss
@for $i from 1 through 4 { .p#{$i} { padding-left : $i * 10px; } }
您可以使用以下命令,让SASS监视文件并在SASS文件更改时更新CSS-
sass --watch C:\ruby\lib\sass\style.scss:style.css
接下来,执行以上命令;它将使用以下代码自动创建style.css文件。
style.css
.p1 { padding-left: 10px; } .p2 { padding-left: 20px; } .p3 { padding-left: 30px; } .p4 { padding-left: 40px; }
To
描述
所述@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。
style.scss
@for $i from 1 to 4 { .p#{$i} { padding-left : $i * 10px; } }
您可以使用以下命令,让SASS监视文件并在SASS文件更改时更新CSS:
sass --watch C:\ruby\lib\sass\style.scss:style.css
接下来,执行以上命令;它将使用以下代码自动创建style.css文件:
style.css
.p1 { padding-left: 10px; } .p2 { padding-left: 20px; } .p3 { padding-left: 30px; }
作者:terry,如若转载,请注明出处:https://www.web176.com/sass/1702.html