Sass@for循环生成样式技巧

本文深入介绍了如何利用Sass的`@for`循环高效批量生成CSS类样式，尤其适用于构建栅格系统——从自动生成`.col-1`到`.col-12`的基础宽度类，到结合`calc()`动态计算带边距的偏移类（如`.col-offset-*`），再到嵌套媒体查询产出响应式断点类（如`.sm-col-*`），全程仅需简洁几行代码，显著减少重复劳动、提升可维护性与开发效率；无论是栅格布局、间距控制还是字体缩放等成体系的工具类开发，`@for`都是简化CSS工程化实践的利器。

在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学习网公众号了解相关技术文章。