因为栅格列数是面向人的语义化命名（如col-1至col-12），col-0无意义且违背Bootstrap、Tailwind等主流约定；@for $i from 1 through 12直接对应实际可用列数，避免生成冗余无效的col-0类。
用 @for 生成栅格类名时，为什么 $i 从 1 开始而不是 0？
因为栅格列数（如 col-1 到 col-12）是面向人的语义化命名，col-0 没有意义，也不符合 Bootstrap、Tailwind 等主流约定。Sass 的 @for $i from 1 through 12 直接对应实际可用列数。
常见错误是写成 @for $i from 0 through 12，结果多出无用的 col-0 类，还可能干扰 CSS 选择器优先级或被误触发。
- 列数范围必须和设计系统对齐，比如你只支持 1–12 列，就别循环到 16
- 如果项目需要“偏移”（offset）或“排序”（order），它们的数值范围通常和列数一致，可复用同一循环变量
- 注意：Sass 中
@for $i from a to b是**不包含**b的，要用through才能取到终点
媒体查询断点嵌套后，CSS 输出体积暴增怎么办？
直接在 @for 外层套 @each $breakpoint, $width in $grid-breakpoints，会导致每个断点都重复生成全部列类，12 列 × 5 断点 = 60 个规则——看似干净，实则冗余严重，尤其当多个断点共享相同类（如 col-6 在 sm/md/lg 都存在）。
更合理的做法是：先按断点分组，再为每个断点单独循环列数，并只生成该断点下**真正需要覆盖的类**。
- 把断点配置定义为 map：
$grid-breakpoints: ("sm": 576px, "md": 768px, "lg": 992px, "xl": 1200px) - 用
@media (min-width: #{$width})包裹内层@for，避免用@include media-breakpoint-up这类封装——它可能隐式插入额外规则 - 性能提示：如果某断点下不需要响应式列（如移动端始终 100% 宽），跳过该断点的循环，别硬塞空
@media
calc() 计算栅格宽度时，为什么不能直接写 calc(100% / #{$i})？
因为 Sass 编译时 #{$i} 是数字，但 calc() 是 CSS 运行时函数，Sass 不会帮你做除法运算；直接写会输出 calc(100% / 3) —— 浏览器能识别，但可读性差，且无法参与后续计算（比如加 margin 或减 gap）。
更可控的方式是预先算好百分比值，再注入字符串：
@for $i from 1 through 12 {
.col-#{$i} {
flex: 0 0 calc(#{$i * 8.333}% - #{$grid-gutter-width});
}
}
这里 8.333% 是 100 ÷ 12 的近似值，适用于 12 列系统；若用其他列数，需动态算出 (100 / $grid-columns) 并保留足够小数位。
- 别依赖浏览器自动四舍五入，
calc(100% / 7)在不同引擎下渲染可能有 0.1px 偏差 - 如果用了
gap，记得从总宽里减去 gutter 占用，否则多列并排会溢出容器 - 使用
percentage($i / $grid-columns)函数比手写8.333%更安全，但要注意 Sass 版本兼容性（3.4+ 支持）
如何让生成的栅格类支持 max-width 限制而不破坏流式行为？
纯 flex-basis + calc() 只控制“基准宽度”，但设计稿常要求“最大不超过某个像素值”，比如 col-4 在超大屏上不能无限撑开。这时候不能只靠循环生成基础类，得叠加一层 max-width 控制逻辑。
推荐做法：为关键列数（如 col-12、col-8）单独加 max-width，用另一个 @each 驱动，避免所有类都套上冗余声明。
- 定义一个受限列映射：
$constrained-cols: (12: 1200px, 8: 800px, 4: 600px) - 在主循环后追加：
@each $cols, $max in $constrained-cols { .col-#{$cols} { max-width: $max; } } - 不要给每个
col-X都加max-width: none重置，那会污染 specificity，也增加 CSS 体积
复杂点在于：max-width 和 flex-basis 共存时，浏览器按 flex 规则优先级处理，不是简单“谁写在后面谁生效”。实际调试时，建议用 DevTools 的 Layout 面板确认最终尺寸来源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
