CSS列表布局如何快速适配_使用Sass的@for循环生成网格宽度-css教程-PHP中文网

直接写 .col-1 到 .col-12 比手写 CSS 更可靠，因 Sass 的 @for 能确保数值连续、单位统一、逻辑固化，改栅格基数只需调一个变量；用 through 避免漏类，用 unquote() 处理 grid-column，且应限制循环范围防体积暴增。

css列表布局如何快速适配_使用sass的@for循环生成网格宽度

手动维护 12 个类名的宽度规则，容易漏改、错值、单位不一致；而 Sass 的 @for 能确保数值连续、单位统一、无重复。更重要的是，它把“列数→宽度”的映射逻辑显式固化下来，后续改栅格基数（比如从 12 切到 24）只需调一个变量，不用逐个算百分比。

常见错误是写成 @for $i from 1 to 12，结果漏掉 .col-12 —— 正确写法必须用 through：

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

注意：percentage() 是 Sass 内置函数，返回带 % 单位的字符串，无需拼接；若用 calc(#{$i} / 12 * 100%) 反而引入运行时计算，失去静态编译优势。

想给每个断点（sm、md、lg）都配一套 .col-sm-1….col-lg-12？直接三层嵌套会生成 3×12=36 个类——但真正被用到的可能不到 1/5。更务实的做法是只生成高频组合：

否则，未使用的 .col-md-7 会留在 CSS 里，增加体积且干扰 DevTools 查找。

Flex/Grid 布局下，.col-3 不再代表“占 25% 宽度”，而是“占 3 栅格线”，此时 grid-column: span 3 才是正解。但 @for 循环里不能直接写 span #{$i} —— 因为 span 是关键字，Sass 不会把它当字符串插值。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

正确写法是用引号包裹后 unquote()：

@for $i from 1 through 12 {
  .g-col-#{$i} {
    grid-column: unquote("span #{$i}");
  }
}

漏掉 unquote() 会导致编译出 grid-column: "span 3"（带引号的字符串），浏览器直接忽略该声明。另外，grid-column 不支持百分比值，所以别在 Grid 场景里混用 percentage()。

有人用 @for $i from 1 through 100 生成图标类名或 z-index 层级，结果产出几百行无用 CSS。列表布局场景中，真正的约束是设计系统定义的列数上限（通常是 12 或 24），超出这个数的类名既不会被 HTML 引用，也无法被浏览器优化。

判断是否滥用的关键信号：

网格宽度生成这件事，12 就是硬边界。多一行 @for 循环，就多一分维护负担和加载成本。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！

CSS列表布局如何快速适配_使用Sass的@for循环生成网格宽度