Sass@for循环生成类样式方法

本文深入介绍了如何利用Sass的`@for`循环高效批量生成CSS类样式，尤其适用于构建栅格系统——从`.col-1`到`.col-12`的宽度类、带间距控制的偏移类（如`.col-offset-1`～`.col-offset-12`），以及结合媒体查询生成的响应式类（如`.sm-col-*`），通过`from...through`语法精准控制范围，并巧妙融合`calc()`实现动态计算，显著减少手写重复代码的工作量，提升开发效率与样式可维护性，是前端工程师打造现代化、模块化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学习网公众号！