重构人生

外观

循环 @for

约 1364 字大约 5 分钟

2025-04-11

在 Sass 中，@for 是一个控制指令，用于按数字范围循环生成样式，特别适合处理需要固定次数迭代的场景（如栅格系统、序列化类名生成）。以下是 @for 的详细介绍、用法和特性：

一、@for 的核心作用

  • 数字范围遍历：基于起始值和结束值生成连续的数值循环。
  • 生成规律代码：自动生成规律性强的样式（如 .col-1 到 .col-12）。
  • 动态计算：结合变量或函数生成动态样式（如间距、尺寸、动画关键帧）。

二、基本语法

@for 有两种语法形式，区别在于是否包含结束值：

1、through（包含结束值）

循环次数 = 结束值 - 起始值 + 1（包含结束值）。

@for $变量 from <起始值> through <结束值> {
  // 循环体代码
}

类似于：

for (let i = 0; i <= 10; i++) {
  // 循环体代码
}

2、to（不包含结束值）

循环次数 = 结束值 - 起始值（不包含结束值）。

@for $变量 from <起始值> to <结束值> {
  // 循环体代码
}

类似于：

for (let i = 0; i < 10; i++) {
  // 循环体代码
}

三、特性与核心用法

1、生成序列化类名

例如：生成栅格系统的列宽（如 .col-1 到 .col-12）。

$columns: 12;

@for $i from 1 through $columns {
  .col-#{$i} {
    width: percentage($i / $columns); // 转换为百分比
  }
}

编译后：

.col-1 {
  width: 8.33333%;
}
.col-2 {
  width: 16.66667%;
}
/* ... */
.col-12 {
  width: 100%;
}

2. 动态计算样式值

例如：生成不同层级的阴影样式。

@for $level from 1 through 3 {
  .shadow-#{$level} {
    box-shadow: 0 ($level * 2px) ($level * 4px) rgba(0, 0, 0, 0.1);
  }
}

编译后：

.shadow-1 {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.shadow-2 {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.shadow-3 {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

3、结合混入（Mixin）使用

例如：生成响应式断点的栅格类。

@mixin generate-grid($breakpoint: "") {
  @for $i from 1 through 12 {
    .col-#{$breakpoint}-#{$i} {
      width: percentage($i / 12);
    }
  }
}

// 生成基础栅格类
@include generate-grid();

// 生成响应式栅格类
@media (min-width: 768px) {
  @include generate-grid("md");
}

编译后：

.col-1 {
  width: 8.33333%;
}
.col-2 {
  width: 16.66667%;
}
/* ...col-2 到 col-11... */
.col-12 {
  width: 100%;
}

@media (min-width: 768px) {
  .col-md-1 {
    width: 8.33333%;
  }
  /* ...col-md-2 到 col-md-11... */
  .col-md-12 {
    width: 100%;
  }
}

四、高级用法与示例

1、嵌套循环

例如：生成多维度工具类（如边距和填充）。

$sizes: (0, 4, 8, 16);
$directions: (
  "t": "top",
  "b": "bottom",
  "l": "left",
  "r": "right",
);

@each $dir-abbr, $dir-full in $directions {
  @for $size in $sizes {
    .m#{$dir-abbr}-#{$size} {
      margin-#{$dir-full}: #{$size}px;
    }
    .p#{$dir-abbr}-#{$size} {
      padding-#{$dir-full}: #{$size}px;
    }
  }
}

编译后：

.mt-0 {
  margin-top: 0px;
}
.pt-0 {
  padding-top: 0px;
}
.mt-4 {
  margin-top: 4px;
}
.pt-4 {
  padding-top: 4px;
}
/* ... */

2、动态颜色计算

例如：生成色阶渐变类（如 .lighten-10、.darken-20）。

$base-color: #3498db;

@for $i from 1 through 4 {
  .lighten-#{$i * 10} {
    background: lighten($base-color, $i * 10%);
  }
  .darken-#{$i * 10} {
    background: darken($base-color, $i * 10%);
  }
}

编译后：

.lighten-10 {
  background: #4aa3df;
}
.darken-10 {
  background: #2a7aaf;
}
.lighten-20 {
  background: #5fb0e4;
}
/* ... */

3、生成动画关键帧

例如：动态生成逐帧动画。

@keyframes fade-in {
  @for $i from 0 through 10 {
    #{percentage($i * 0.1)} {
      opacity: $i * 0.1;
    }
  }
}

编译后：

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0.1;
  }
  /* ... */
  100% {
    opacity: 1;
  }
}

五、注意事项

1、起始值与结束值

  • 可以是正数、负数或变量，但必须为整数。
  • 若起始值 > 结束值，循环不会执行。

2、避免无限循环

  • 确保结束条件可达成，例如：
    // 错误示例：起始值 > 结束值且使用 through
@for $i from 5 through 1 {
  /* 不会执行 */
}

3、性能优化

  • 避免循环次数过多（如超过 100 次），否则会显著增加编译时间。

六、@for vs @each vs @while

指令适用场景特点示例
@for固定数字范围的循环（如 1 到 5）简洁，无需手动管理索引栅格系统、序列化类名
@each遍历列表或映射中的元素适合处理集合数据（如颜色列表）主题色、图标类生成
@while`动态终止条件的复杂循环逻辑灵活性高，但需手动控制终止条件根据变量动态生成类名

七、实际应用场景

1、栅格系统

生成 12 列响应式栅格：

@for $i from 1 through 12 {
  .col-#{$i} {
    width: percentage($i / 12);
  }
}

2、工具类生成

生成字体大小工具类（如 .fs-12 到 .fs-24）：

@for $size from 12 through 24 {
  .fs-#{$size} {
    font-size: #{$size}px;
  }
}

3、动画关键帧

生成逐帧动画：

@keyframes slide {
  @for $i from 0 through 10 {
    #{percentage($i * 0.1)} {
      transform: translateX($i * 10%);
    }
  }
}

八、最佳实践

  1. 优先用于固定次数循环
    如生成栅格、工具类等场景，避免复杂逻辑。

  2. 保持循环体简洁
    复杂逻辑封装到混合宏或函数中，提升可读性。

  3. 结合函数动态计算
    使用 lighten()、darken() 或自定义函数生成动态值。

  4. 合理控制循环次数
    避免生成过多冗余 CSS（如超过 100 次循环）。

九、总结

核心优势典型场景关键技巧
简化重复代码栅格系统、工具类生成结合 percentage() 等函数
动态生成样式颜色渐变、动画关键帧嵌套循环与混合宏结合
高效数字迭代间距、字体尺寸、层级控制控制循环次数优化性能

通过合理使用 @for，可以大幅提升 Sass 代码的效率和可维护性，尤其适合需要按固定规律生成样式的场景。

更新日志

2025/8/24 08:17
查看所有更新日志
  • e7112-1于