Sass整数除法默认截断导致percentage($i / $grid-columns)输出0%，必须用12.0强制浮点运算或calc(100% / #{$grid-columns} * #{$i})确保精度与响应式兼容。
为什么percentage($i / $grid-columns)常输出0%
这不是写错了，是 Sass 整数除法默认截断。比如 $i: 1、$grid-columns: 12，1 / 12 直接得 0，再套 percentage(0) 就是 0%。所有列宽全归零，页面直接塌陷。
必须显式转浮点：用 12.0 替代 12，或提前定义 $col-unit: 100% / $grid-columns;，后续直接 width: calc(#{$col-unit} * #{$i});。
@for 循环生成栅格类时，through 和 to 的边界差异
写 @for $i from 1 to 12 只生成 .col-1 到 .col-11，漏掉关键的 .col-12 —— 这在 12 列系统里会导致大屏最后一列换行或宽度异常，DevTools 里查不到报错，只看到布局错位。
-
through 12包含终点，语义明确，主流框架（Bootstrap/Tailwind 源码）全用这个 - 换成
to 13虽然结果一样，但后续扩展到 24 列时容易误改错位置 - 上限值不是“可有可无”，而是栅格系统实际生效的硬边界
响应式栅格中，calc() 拼接必须用 #{$var} 而非 $var
SCSS 会提前计算 $grid-columns 并转成小数（如 12.00000），再拼进字符串就变成 calc(100% / 12.00000 * 3)，部分旧版编译器或构建工具可能解析失败。
立即学习“前端免费学习笔记（深入）”；
正确写法是用插值语法：calc(100% / #{$grid-columns} * #{$i})，确保原样输出整数参与 CSS 运算。
别用 percentage($i / $grid-columns) —— 它不支持响应式上下文，且对小数精度处理不稳定，尤其在嵌套 @each 断点时容易产出错误值。
父容器没设宽度时，calc(100% - 24px) 为什么会变负数？
100% 是相对父容器计算的。如果父容器没显式设 width（比如没写 width: 100% 或固定值），它的宽度可能是 auto，此时 100% 解析为 0px，整个表达式变成 calc(0px - 24px) = -24px，浏览器按负值渲染，元素消失或错位。
务必确认父容器有明确宽度来源：
- 设了
width: 100%或max-width - 是 flex/grid 容器的子项且主轴尺寸已确定
- 自身有
position: absolute且left/right已定义
这是 calc 布局中最隐蔽的失效点——没报错、没警告，只默默出错。
