用@for循环批量生成表格列宽规则更高效，需注意变量映射、单位处理、响应式控制及<col>标签优化，避免CSS膨胀与语义错误。
表格列宽不一致，手写CSS太累怎么办
用 @for 循环批量生成列宽规则，比手动写 .col-1 到 .col-12 省事得多，也更易维护。
关键不是“能不能循环”，而是循环变量怎么映射到实际列数、类名要不要带单位、是否要预留响应式断点。Sass 的 @for 本身不处理语义，得靠命名约定和计算逻辑兜住。
- 别直接用
$i当像素值——@for $i from 1 through 12 { .col-#{$i} { width: #{$i}px; } }生成的是 1px、2px…完全没意义 - 常见做法是把
$i当“份数”，配合总宽（比如 100%）做计算：width: percentage($i / 12); - 如果列数固定为 12，建议封装成
@function grid-col-width($n) { @return percentage($n / 12); }，后续改栅格系统时只动函数
Sass 中 @for 生成类名时容易漏掉单位或引号
类名拼接必须用 #{$i}，但宽度值如果来自变量，漏掉单位或引号会编译失败或样式错乱。
比如 width: #{$i}%; 看似合理，但若 $i 是字符串（如 "25"），拼出来就是 width: "25"%; —— 浏览器不认。Sass 要求数值参与计算时必须是数字类型。
立即学习“前端免费学习笔记（深入）”；
- 确保输入是数字：
@for $i from 1 through 12 { .col-#{$i} { width: #{$i * 8.333}% ; } }（8.333 ≈ 100/12） - 避免字符串插值用于数值计算：
width: "#{$i}%"是错的；width: #{$i + "%"}也不行，加号会触发字符串连接而非单位绑定 - 更稳妥：用
percentage()函数，它自动处理数字转百分比，且要求输入为 number
响应式场景下，@for 循环嵌套断点易导致 CSS 膨胀
为每个断点（sm/md/lg）都套一层 @for，最后生成的 CSS 文件体积可能翻几倍，尤其列数多、断点多时。
不是不能嵌套，而是得控制输出粒度。比如移动端只需 4 列，桌面端才用 12 列，那就别让 sm 断点也循环 1–12。
- 按需定义循环范围：
@each $breakpoint, $cols in (sm: 4, md: 8, lg: 12) { @include media-breakpoint-up($breakpoint) { @for $i from 1 through $cols { ... } } } - 避免重复类名：
.col-sm-1和.col-md-1本质都是“占 1 份”，可考虑用属性选择器统一处理，减少循环层数 - 注意编译后 CSS 选择器权重——嵌套越深，生成的选择器越长，影响性能和覆盖逻辑
用 @for 生成表格列宽时，<col> 标签比 class 更轻量
如果表格结构稳定、列数固定，直接用 HTML 的 <col> 标签配 Sass 循环，比给每个 <td> 加 class 更高效。
<col> 不渲染内容，纯样式占位，浏览器原生支持，且无需 JS 干预。Sass 只负责输出 col:nth-child(n) 规则即可，不污染 DOM 结构。
- 示例：
@for $i from 1 through 6 { col:nth-child(#{$i}) { width: #{$i * 12.5}% ; } }（6 列，等比递增） - 注意
<col>必须放在<table>内第一层，且不能被<tbody>包裹，否则失效 - IE 支持有限（IE9+），如需兼容旧版，仍得 fallback 到 class 方案
真正麻烦的不是写循环，而是想清楚：这个表格到底需不需要每列都独立控制？很多时候用 table-layout: fixed 配合 width 在 <col> 上就足够了，@for 只是让这件事不那么枯燥而已。
