使用Sass的@for循环可批量生成栅格类，如从.col-1到.col-12，通过from...through包含结束值，结合calc()实现动态宽度与边距计算，并能嵌套媒体查询生成响应式类，有效减少重复代码，提升开发效率。

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

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

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

下面例子生成 12 个宽度类：

@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() 动态计算宽度。

立即学习“前端免费学习笔记（深入）”；

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

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

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

嵌套与响应式类结合

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

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

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

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