必须手动建立断点名到媒体查询的映射，否则生成的 grid-cols-* 类无响应效果；推荐用 map 定义 $breakpoints，外层 @each 遍历断点并嵌套 @media，内层 @for 生成列数，注意单位统一、整型处理与特异性控制。
用 @each 遍历断点生成 grid-cols-* 工具类时，必须手动定义断点映射关系
SCSS 本身不识别“响应式”语义，@each 只是简单迭代。想让 grid-cols-sm-6 生效，得先建立断点名（如 sm）到媒体查询（如 (min-width: 640px)）的映射，否则生成的类全在默认层，毫无响应效果。
推荐写法是用 map 存断点：
$breakpoints: ( sm: 640px, md: 768px, lg: 1024px, xl: 1280px );
再配合嵌套 @each：外层遍历断点，内层遍历列数。漏掉这层映射，生成的类名只是空壳。
生成 grid-cols-1 到 grid-cols-12 时，别直接写死数字范围
硬编码 1 到 12 看似省事，但一旦后续要支持 grid-cols-16 或响应式 grid-cols-xl-24，就得改多处。更灵活的做法是抽成变量：
$grid-columns: 12;
然后用 @for $i from 1 through $grid-columns 循环 —— 这样改上限只需动一行。注意：@for 和 @each 不能混用在同一层级，若坚持纯 @each，就得用 map-keys 模拟序列，反而绕路。
常见错误是把列数当字符串拼接，比如 "grid-cols-#{$i}"，结果生成 grid-cols-1.0（因 $i 是浮点）。务必用 floor($i) 或确保循环变量为整型。
媒体查询嵌套位置错，会导致所有类都在同一断点生效
很多人把 @media 写在最外层，再里面套 @each，结果所有生成的类都包裹在同一个查询里，比如全部只在 md 下生效。正确结构是：外层 @each $breakpoint, $width in $breakpoints，内层 @media (min-width: $width)，再里面才放列数循环。
关键点：
- 每个断点对应一个独立
@media块 -
@media必须紧贴断点循环体内，不能提上去 - 如果用
min-width，记得断点按升序排列，否则小屏样式会被大屏覆盖
工具类命名冲突和 CSS 特异性问题得提前防住
直接生成 .grid-cols-6 没问题，但加了断点前缀后，比如 .grid-cols-sm-6，要注意它是否和已有类重名（如第三方 UI 库也用了同样命名）。更隐蔽的问题是特异性：如果基础 .grid-cols-6 定义在前面，而 @media 里的 .grid-cols-sm-6 在后面，小屏下可能因规则顺序被覆盖。
建议做法：
- 统一前缀，比如全用
g-col-避免冲突 - 把响应式类放在非响应式类之后编译（靠 SCSS 文件引入顺序控制）
- 用
!important是下策；更好的方式是提升选择器特异性，比如加.g-grid父类限定：.g-grid .g-col-sm-6
实际项目中，最容易被忽略的是断点单位一致性 —— 混用 px、rem 或 em 会导致媒体查询失效，且 SCSS 不报错。所有 $breakpoints 值必须带单位，且单位统一。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
