应使用 @each 遍历 map 而非 @for 生成栅格类，因 @each 可绑定语义化键名、支持非数值值（如 auto）、避免手动修改循环范围，且能安全生成断点前缀与轨道线类，防止列数升级时出现静默错误。
为什么不能用 @for 生成栅格类
栅格类（如 .col-1 到 .col-12）需要语义化、可读性强的类名，且后续要支持断点前缀（.md:col-6）、方向修饰（.col-start-3）等扩展。@for 虽能循环数字，但一旦设计系统从 12 列升级为 24 列，所有 @for $i from 1 through 12 都得手动改，漏一处就导致 .col-12 缺失或 .col-24 不生效。
更关键的是：@for 无法天然携带语义键名。你没法让 $i == 1 自动对应 “one” 或 “full”，而栅格命名常需这种映射（比如 .col-auto、.col-fit）。@each 遍历 map 才能同时绑定名称、值、行为。
-
@for $i from 1 to 12→ 漏掉.col-12（to是开区间） -
@for $i from 1 through 12→ 仍无法表达auto、fit-content这类非数值值 - 响应式嵌套时，@for 套 @each 容易把断点写进选择器字符串里，生成无效的
"md":col-6
用 @each 遍历列数 map 生成基础栅格类
把列数定义为带引号的字符串 map，确保键名可安全插值进 class 名：
$grid-columns: ("1": 8.33333%, "2": 16.66667%, "3": 25%, "4": 33.33333%, "5": 41.66667%, "6": 50%, "7": 58.33333%, "8": 66.66667%, "9": 75%, "10": 83.33333%, "11": 91.66667%, "12": 100%);
@each $key, $val in $grid-columns {
.col-#{$key} {
flex: 0 0 $val;
max-width: $val;
}
}
注意点：
- 键必须加引号（
"1"），否则@each $key, $val in $grid-columns中$key是 number 类型，插值.col-#{$key}会失败或触发 Sass 类型警告 - 百分比值建议直接写死或用
percentage($key / 12.0)计算，避免整除截断（1 / 12得 0，1 / 12.0才得正确小数） - 不要在 map 里混用数字键和字符串键，Sass 对键类型敏感，
("1": ..., 2: ...)可能导致部分项被跳过
嵌套 @each 生成响应式栅格类（断点 + 列数）
断点 map 必须用无引号标识符作 key（如 sm、md），否则生成的类名会带引号，变成 ."sm":col-6 这种非法语法：
$breakpoints: (sm: "(max-width: 768px)", md: "(min-width: 769px)", lg: "(min-width: 1200px)");
@each $breakpoint, $query in $breakpoints {
@media #{$query} {
@each $key, $val in $grid-columns {
.#{$breakpoint}:col-#{$key} {
flex: 0 0 $val;
max-width: $val;
}
}
}
}
这样编译后是标准的 .md:col-6，而不是 ."md":col-6。关键约束：
-
$breakpoint是 identifier（无引号），不是 string；若你从 JSON 导入断点，需先用map-keys()+nth()提取并转为 identifier - @media 必须包裹整个内层循环，否则每个
.col-#{$key}都单独套一遍媒体查询，CSS 体积翻 N 倍 - 如果用 Vite/Webpack，确保断点 map 在同一文件里定义并使用，跨文件
@import后再嵌套@media，可能丢失包裹逻辑
生成 grid-column-start / end 类时的边界陷阱
栅格中轨道线类（如 .col-start-3）依赖数值索引，但起始值不是从 1 开始安全 —— CSS 的 grid-column-start: 1 指第一根线，而最后一根线编号是列数 + 1。12 列网格，合法范围是 1 到 13（含）：
$grid-lines: ("1": 1, "2": 2, "3": 3, "4": 4, "5": 5, "6": 6, "7": 7, "8": 8, "9": 9, "10": 10, "11": 11, "12": 12, "13": 13);
@each $key, $val in $grid-lines {
.col-start-#{$key} { grid-column-start: #{$val}; }
.col-end-#{$key} { grid-column-end: #{$val}; }
}
容易踩的坑：
- 漏掉
"13"→.col-start-13编译缺失，无法让元素跨到最右侧轨道线之后 - 用
@for $i from 1 through length($grid-lines)替代 map，看似省事，但一旦删掉某个键（如去掉"13"），length 变小，循环自动截断，错误静默发生 - DevTools 的 Computed 栏里看不出
grid-column-start: 14是否生效 —— 它只是不渲染，没报错，排查成本极高
真正麻烦的不是第一次写对，而是当设计规范从 12 列切换到 24 列时，你得同步更新三处：$grid-columns map、$grid-lines map、以及所有引用它们的循环——少改一个，生产环境就出现不可见的布局断裂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
