循环 SCSS

SCSS 是 Sass 的一种语法形式，它为 CSS 扩展了许多有用的功能，其中包括循环。循环让我们可以使用 Sass 生成大量代码，从而减少了手动编写样式表的工作量。

基本循环

使用 Sass 变量和语法，我们可以轻松地编写简单的循环。下面是一个基本的循环示例：

@for $i from 1 through 5 {
  .item-#{$i} {
    width: 10px * $i;
  }
}

在上面的代码块中，我们定义了一个循环，它会生成五个类名，分别为 .item-1 到 .item-5。这些类名的宽度分别为 10 像素、20 像素、30 像素、40 像素和 50 像素。

下面是上面代码块的生成的 CSS 代码：

.item-1 {
  width: 10px;
}

.item-2 {
  width: 20px;
}

.item-3 {
  width: 30px;
}

.item-4 {
  width: 40px;
}

.item-5 {
  width: 50px;
}

基本循环的语法

从 1 开始，其中 $i 是循环变量。through 是关键字，表示直到循环结束的值。如果想要使用语法形式用 to，则需要从 0 开始：

@for $i from 0 to 5 {
  .item-#{$i} {
    width: 10px * $i;
  }
}

这个循环也会生成五个类名，分别为 .item-0 到 .item-4。这些类名的宽度将为 0 像素、10 像素、20 像素、30 像素和 40 像素。

嵌套循环

Sass 还允许嵌套循环。下面是一个嵌套循环的示例：

@for $i from 1 through 3 {
  .row-#{$i} {
    @for $j from 1 through 4 {
      .col-#{$j} {
        width: 100px * $j;
      }
    }
  }
}

在上面的代码块中，我们定义了一个嵌套循环，它会生成三行四列的网格，其中每列的宽度分别为 100 像素、200 像素、300 像素和 400 像素。

下面是上面代码块的生成的 CSS 代码：

.row-1 .col-1 {
  width: 100px;
}

.row-1 .col-2 {
  width: 200px;
}

.row-1 .col-3 {
  width: 300px;
}

.row-1 .col-4 {
  width: 400px;
}

.row-2 .col-1 {
  width: 100px;
}

.row-2 .col-2 {
  width: 200px;
}

.row-2 .col-3 {
  width: 300px;
}

.row-2 .col-4 {
  width: 400px;
}

.row-3 .col-1 {
  width: 100px;
}

.row-3 .col-2 {
  width: 200px;
}

.row-3 .col-3 {
  width: 300px;
}

.row-3 .col-4 {
  width: 400px;
}

嵌套循环的语法

第一个循环指定行数（1-3），第二个循环指定列数（1-4）。循环逐行生成，每行有四个 .col-#{$j} 类。循环变量 $i 和 $j 都可以在循环内部使用，因此它们的值会根据每个循环逐渐增加。

结论

循环是 Sass 中最重要的功能之一，它可以极大地减少编写 CSS 样式表的工作量。Sass 提供了基本循环和嵌套循环。它们可以用来生成任何数量的类名和 CSS 规则。