如何在 SASS 中使用 @for 循环？

如何在 SASS 中使用 @for 循环？

SASS 是一种 CSS 预处理器，它提供了许多方便的语法和功能，其中 @for 循环是其中之一。@for 循环可以让我们在 SASS 中轻松地生成重复的 CSS 代码，从而简化我们的代码并提高效率。

@for 循环的基本语法如下：

@for $i from <start> through <end> {
  // 循环体
}

其中，$i 是一个变量，从 开始递增到 ，每次循环都会执行循环体中的代码。

例如，如果我们想要生成 5 个不同的颜色，可以使用以下代码：

@for $i from 1 through 5 {
  .color-#{$i} {
    background-color: #{$i * 10000};
  }
}

这将生成以下 CSS 代码：

.color-1 {
  background-color: #10000;
}
.color-2 {
  background-color: #20000;
}
.color-3 {
  background-color: #30000;
}
.color-4 {
  background-color: #40000;
}
.color-5 {
  background-color: #50000;
}

除了基本语法外，@for 循环还有一些高级用法，例如使用步长和使用列表进行迭代。

使用步长

有时我们需要按不同的步长递增变量。这可以通过指定步长来实现。例如，如果我们想要生成 10 个宽度递增 10px 的方块，可以使用以下代码：

@for $i from 10 through 100 step 10 {
  .box-#{$i} {
    width: #{$i}px;
  }
}

这将生成以下 CSS 代码：

.box-10 {
  width: 10px;
}
.box-20 {
  width: 20px;
}
.box-30 {
  width: 30px;
}
.box-40 {
  width: 40px;
}
.box-50 {
  width: 50px;
}
.box-60 {
  width: 60px;
}
.box-70 {
  width: 70px;
}
.box-80 {
  width: 80px;
}
.box-90 {
  width: 90px;
}
.box-100 {
  width: 100px;
}

使用列表进行迭代

有时我们需要按照特定的顺序迭代变量。这可以通过使用列表来实现。例如，如果我们想要生成一些特定的字体大小，可以使用以下代码：

$font-sizes: 12px, 14px, 16px, 18px, 20px;

@for $i from 1 through length($font-sizes) {
  .font-#{$i} {
    font-size: nth($font-sizes, $i);
  }
}

这将生成以下 CSS 代码：

.font-1 {
  font-size: 12px;
}
.font-2 {
  font-size: 14px;
}
.font-3 {
  font-size: 16px;
}
.font-4 {
  font-size: 18px;
}
.font-5 {
  font-size: 20px;
}

总结

@for 循环是 SASS 中非常有用的功能之一，它可以帮助我们快速生成重复的 CSS 代码，从而提高我们的效率。除了基本语法外，我们还可以使用步长和列表进行迭代，以满足更多的需求。如果你还没有使用 SASS，我建议你尝试一下，它将帮助你更好地组织和管理你的 CSS 代码。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658b96f8eb4cecbf2d0d47ef