Sass 循环 - CSS

Sass 是一种 CSS 预处理器，增加了许多功能和语法，例如循环。循环让我们能够编写更少的代码，并自动生成重复的样式。

在 Sass 中，有两种类型的循环：@for 和 @while。它们的语法类似于 JavaScript 的 for 循环和 while 循环。

@for 循环

@for 循环允许我们在指定的次数内进行迭代。

语法：

@for $var from [start] through [end] {
  // code
}

• $var：变量名，将在每次循环中更新。
• [start]：起始值。
• [end]：结束值。

通过 @for 循环可以遍历一个列表或一个范围，循环中的代码将在每次迭代中执行，直到变量达到结束值。

示例：

$colors: red, green, blue, orange;
@for $i from 1 through length($colors) {
  .color-#{nth($colors, $i)} {
    color: nth($colors, $i);
  }
}

上面的示例将创建四个 CSS 类名为 ".color-red"、".color-green"、".color-blue" 和 ".color-orange" 的样式，它们的颜色分别与变量 $colors 中的相应颜色匹配。

@while 循环

@while 循环执行基于某个条件的重复代码块。

语法：

@while [condition] {
  // code
}

• [condition]：循环条件。

该循环将在循环条件为真时执行。如果循环条件不满足，则循环将终止。

示例：

$i: 1;
@while $i < 6 {
  .loop-#{$i} {
    width: 10px * $i;
  }
  $i: $i + 1;
}

上面的示例将创建五个 CSS 类名为 ".loop-1"、".loop-2"、".loop-3"、".loop-4" 和 ".loop-5" 的样式，它们的宽度从 10 像素到 50 像素不等。

循环总结

通过使用 Sass 中的循环，我们可以更容易地生成重复的代码块并减少冗余代码。循环对于创建具有类似结构的元素和组件非常有用，从而使 CSS 文件更加可维护。

Markdown 代码片段：

# Sass 循环 - CSS

Sass 是一种 CSS 预处理器，增加了许多功能和语法，例如循环。循环让我们能够编写更少的代码，并自动生成重复的样式。

在 Sass 中，有两种类型的循环：@for 和 @while。它们的语法类似于 JavaScript 的 for 循环和 while 循环。

## @for 循环

@for 循环允许我们在指定的次数内进行迭代。

语法：

```scss
@for $var from [start] through [end] {
  // code
}
```

- $var：变量名，将在每次循环中更新。
- [start]：起始值。
- [end]：结束值。

通过 @for 循环可以遍历一个列表或一个范围，循环中的代码将在每次迭代中执行，直到变量达到结束值。

示例：

```scss
$colors: red, green, blue, orange;
@for $i from 1 through length($colors) {
  .color-#{nth($colors, $i)} {
    color: nth($colors, $i);
  }
}
```

上面的示例将创建四个 CSS 类名为 ".color-red"、".color-green"、".color-blue" 和 ".color-orange" 的样式，它们的颜色分别与变量 $colors 中的相应颜色匹配。

## @while 循环

@while 循环执行基于某个条件的重复代码块。

语法：

```scss
@while [condition] {
  // code
}
```

- [condition]：循环条件。

该循环将在循环条件为真时执行。如果循环条件不满足，则循环将终止。

示例：

```scss
$i: 1;
@while $i < 6 {
  .loop-#{$i} {
    width: 10px * $i;
  }
  $i: $i + 1;
}
```

上面的示例将创建五个 CSS 类名为 ".loop-1"、".loop-2"、".loop-3"、".loop-4" 和 ".loop-5" 的样式，它们的宽度从 10 像素到 50 像素不等。

## 循环总结

通过使用 Sass 中的循环，我们可以更容易地生成重复的代码块并减少冗余代码。循环对于创建具有类似结构的元素和组件非常有用，从而使 CSS 文件更加可维护。