如何在CSS中使用Sass循环生成类_通过@for循环批量生成样式规则

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

$gutter: 1rem;
@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 循环能大幅减少重复代码，特别适合构建栅格、间距、字体大小等成体系的工具类。注意变量命名清晰，避免生成无用样式影响文件体积。