Sass 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

for循环

在 Sass 中,可以使用 @for 循环来完成。在 Sass 的 @for 循环中有两种方式:

  • @for $i from through
  • @for $i from to
  • $i 表示变量 start 表示起始值 end 表示结束值

这两个的区别是关键字 through 表示包括 end 这个数,而 to 则不包括 end 这个数。

如下代码,先来个使用 through 关键字的例子:

 @for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

被编译为:

.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }

再来个 to 关键字的例子:

 @for $i from 1 to 3 {
  .item-#{$i} { width: 2em * $i; }
}

编译出来的 CSS:

.item-1 {
  width: 2em;
}

.item-2 {
  width: 4em;
}