循环 SCSS

在 SCSS 中，循环是编写可重复使用代码的关键。通过循环语句，我们可以轻松地生成一组类似的样式，而不必重复编写相同的代码。

@for 循环

@for 循环是 SCSS 中常见的循环语句，它允许您在一定范围内迭代并执行命令。以下是 @for 循环的语法：

@for $i from <start> through <end> {
  // Your code here
}

• $i 是迭代器变量。
• <start> 是循环开始的值，可以是数字或变量。
• <end> 是循环结束的值，可以是数字或变量。
• through 是一个关键字，表示包括循环结束的值，即循环 n 次。

以下是一个简单的例子，使用 @for 循环将类 .box 按顺序编号为 .box-1, .box-2, ..., .box-5：

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

输出的 CSS 代码如下：

.box-1 {
  width: 50px;
}

.box-2 {
  width: 100px;
}

.box-3 {
  width: 150px;
}

.box-4 {
  width: 200px;
}

.box-5 {
  width: 250px;
}

@each 循环

@each 循环是 SCSS 中另一种常见的循环语句，它允许您遍历列表并执行命令。以下是 @each 循环的语法：

@each $var in <list> {
  // Your code here
}

• $var 是遍历列表的变量。
• <list> 是要遍历的列表，可以是用逗号分隔的多个值，也可以是一个 SCSS 列表。

以下是一个简单的例子，使用 @each 循环将类 .my-color 添加到每个颜色名称后面，从而创建一个类似于 Bootstrap 颜色的样式表：

$colors: (red, green, blue);
@each $color in $colors {
  .color-#{$color} {
    background-color: $color;
    &.my-color {
      color: white;
    }
  }
}

输出的 CSS 代码如下：

.color-red {
  background-color: red;
}

.color-red.my-color {
  color: white;
}

.color-green {
  background-color: green;
}

.color-green.my-color {
  color: white;
}

.color-blue {
  background-color: blue;
}

.color-blue.my-color {
  color: white;
}

@while 循环

@while 循环是 SCSS 中较为罕见的循环语句，它允许您通过条件来迭代并执行命令。以下是 @while 循环的语法：

@while <condition> {
  // Your code here
}

• <condition> 是一个逻辑表达式，只要为真，循环就会一直进行。

以下是一个简单的例子，使用 @while 循环在 .box 中添加圆形子元素，直到它们的数量达到 10：

$i: 0;
@while $i < 10 {
  .box {
    &:after {
      content: '';
      display: inline-block;
      width: 10px;
      height: 10px;
      background-color: black;
      border-radius: 50%;
      margin: 0 5px;
    }
  }
  $i: $i + 1;
}

输出的 CSS 代码如下：

.box:after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: black;
  border-radius: 50%;
  margin: 0 5px;
}

.box:after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: black;
  border-radius: 50%;
  margin: 0 5px;
}

// ... 中间省略 ...

.box:after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: black;
  border-radius: 50%;
  margin: 0 5px;
}

结论

通过使用 SCSS 中的循环，我们可以更高效地编写样式表。无论是编写可重复使用的类还是生成大量相似的样式，循环都是一种非常有用的技术。