直接写 .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。一套循环无法同时适配两种底层机制，得提前约定好布局模型再生成。
