Sass:@for Directive

@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

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2021年1月27日 下午7:05
下一篇 2021年1月28日 下午8:53

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注