Sass@for循环生成类样式技巧

Sass 的 `@for` 循环是高效构建响应式栅格系统与工具类的利器——仅用几行代码即可批量生成 `.col-1` 到 `.col-12` 等语义化宽度类，支持 `through` 精确包含终点、结合 `calc()` 动态注入边距实现灵活布局，并能自然嵌套媒体查询产出 `.sm-col-*` 等断点专属样式；它彻底告别 CSS 中冗长重复的手写劳动，让栅格、间距、字体等成体系的工具类开发更简洁、可维护且体积可控，是提升前端开发效率不可或缺的 Sass 实践技巧。

在CSS中直接写重复样式很麻烦，Sass的@for循环能帮你快速批量生成类。比如你想生成 .col-1 到 .col-12 这样的栅格类，用@for几行代码就能搞定。

使用 @for 从 1 到 n 生成类名

Sass 的 @for 支持 from ... through 和 from ... to 两种写法。through 包含结束值，to 不包含。

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

编译后会得到：

.col-1 { width: 8.333%; }
.col-2 { width: 16.667%; }
/* ... */
.col-12 { width: 100%; }

结合 calc() 实现更灵活布局

如果你需要考虑边距（如 gutter），可以用 calc() 动态计算宽度。

$gutter: 1rem;
<p>@for $i from 1 through 12 {
.col-offset-#{$i} {
margin-left: calc((100% / 12) * #{$i} + #{$gutter});
}
}
</p>

这样每个偏移类都会加上指定外边距，适合做栅格系统中的推拉效果。

嵌套与响应式类结合

你还可以把 @for 和媒体查询结合，生成响应式类。

@for $i from 1 through 6 {
  @media (min-width: 768px) {
    .sm-col-#{$i} {
      width: (100% / 6) * $i;
    }
  }
}

这段代码只在中等屏幕以上生成 .sm-col-* 类，结构清晰又高效。

基本上就这些。用 @for 循环能大幅减少重复代码，特别适合构建栅格、间距、字体大小等成体系的工具类。注意变量命名清晰，避免生成无用样式影响文件体积。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《Sass@for循环生成类样式技巧》文章吧，也可关注golang学习网公众号了解相关技术文章。