CSS如何快速生成网格系统布局_使用SCSS循环生成栅格类名

直接写 .col-1 到 .col-12 不够用，因需覆盖 offset/push/pull 及多断点响应式类，手工编写易错且冗余；SCSS 用 @for 和嵌套自动生成功能完备、逻辑一致的栅格系统。

为什么直接写 .col-1 到 .col-12 不够用？

手写 12 个栅格类名看着简单，但实际要覆盖 offset、push、pull、响应式断点（sm/md/lg/xl），很快变成上百行重复 CSS。更麻烦的是：改一列宽度得同步改所有断点，漏一个就错位。SCSS 的 @for 和嵌套能自动展开，本质是把「人肉复制」交给编译器——只要逻辑写对，生成就是确定的。

@for 循环生成基础列宽类（.col-1～.col-12）

核心是用 $i 控制列数，并算出对应宽度百分比。注意：CSS Grid 布局下更推荐 grid-column，但传统浮动/BFC 栅格仍需 width；这里按兼容性需求保留 float 方案：

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

常见错误：percentage(1/12) 在 SCSS 中会先算整数除法得 0，必须写成 $i / 12.0 或启用 precision 配置。建议统一用 $i / 12.0 避坑。

嵌套断点 + 循环：生成 .col-md-4 这类响应式类

断点变量和循环嵌套顺序很关键——外层遍历断点，内层遍历列数，否则生成的类名会乱序或漏掉组合。示例中 $breakpoints 是 map：

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

$breakpoints: (  sm: 576px,  md: 768px,  lg: 992px,  xl: 1200px);@each $name, $value in $breakpoints {  @media (min-width: $value) {    @for $i from 1 through 12 {      .col-#{$name}-#{$i} {        width: percentage($i / 12.0);      }    }  }}

容易被忽略的点：@media 内不能直接用 @content 或混用 @extend，所有样式必须在循环体内声明；另外，sm 断点实际对应的是「≥576px」，不是「仅在 sm 下生效」，这点和 Bootstrap 行为一致。

offset/push/pull 类怎么一起生成？别重复写四套循环

用 @mixin 抽离公共逻辑，传入后缀名和 CSS 属性名，避免为每种类型单独写循环：

@mixin make-offset($suffix, $prop) {  @for $i from 1 through 12 {    .#{$prop}-#{$suffix}-#{$i} {      #{$prop}: percentage($i / 12.0);    }  }}@include make-offset('md', 'margin-left');@include make-offset('lg', 'margin-left');@include make-offset('md', 'left'); // push@include make-offset('md', 'right'); // pull

性能提示：SCSS 编译时展开是静态的，不影响运行时性能；但类名过多会增大 CSS 文件体积——如果项目只用到 col-4、col-8，就别硬生成全部 12 个，可改用 map-get 按需取值。

真正难的是语义对齐：比如 .col-md-6 在 flex 布局下应设 flex: 0 0 50%，而在 grid 下该设 grid-column: span 6。一套循环无法同时适配两种底层机制，得提前约定好布局模型再生成。