SASS @for 规则

SASS 中的@for规则用于从一个数字向上或向下计数到另一个数字，并检查给定范围之间的每个数字的部分。每个数字都被分配了一个可以在循环中访问的变量名。它 可以通过两种方式使用：

1. 从头到尾：在这种类型中，“从头到尾”包括结束编号作为计数的一部分。

句法：

@for  from  through  {

    /* Body of loop that will be executed 
    when the condition is true */
}

示例：在此示例中，我们将使用 through 语法。 #{$i} 部分是将变量 (i) 与文本组合成字符串的语法。

@for $i from 1 through 3 {
    .col-#{$i} { width: 100%/3 * $i; }
}

输出：

.col-1 {
  width: 33.3333333333%;
}

.col-2 {
  width: 66.6666666667%;
}

.col-3 {
  width: 100%;
}

2. 开始到结束：在这种类型中，“开始到结束”不包括结束编号作为计数的一部分。

句法：

@for  from  to  {

    /* Body of loop that will be executed 
       when the condition is true */
}

例子：

@for $i from 1 to 5 {
  .column-#{$i} { width: 100%/4 * $i; }
}

输出：

.column-1 {
  width: 25%;
}

.column-2 {
  width: 50%;
}

.column-3 {
  width: 75%;
}

.column-4 {
  width: 100%;
}