正确做法是用语义化@mixin（如layout-main-sidebar）配合断点映射map，传$gap、$sidebar-width等业务参数，通过@each生成媒体查询，避免硬编码grid-template-columns和@media。
直接用 @include 封装 grid-template-columns 字符串是错的起点——它把语义和实现绑死，改个断点就得翻 5 个文件。真正快的响应式网格，靠的是「命名即契约」的 @mixin + 可组合的断点映射。
别传 grid-template-columns 字符串，传语义布局类型
常见错误：写一个 @mixin grid-3col($breakpoint)，内部硬编码 repeat(3, 1fr)，再套 @media。结果是：换列数要改 mixin，换断点要改调用，换间距还得加参数——越封装越重。
- 正确做法是让
@mixin名称表达业务意图，比如@mixin layout-main-sidebar或@mixin grid-card-grid - 参数只暴露可变部分：
$gap、$sidebar-width这类有明确业务含义的值，不传$columns这种原始 CSS 字符串 - 内部用
map-get($breakpoints, $type)查配置，而不是写死768px或repeat(2, 1fr)
@mixin 内部不要硬写 @media，用 @each 驱动断点映射
把断点写进 @mixin 体里，等于把响应式逻辑锁死在单个组件里。一旦设计改了「平板起始宽度」，你得 grep 全项目找所有 @media (min-width: 768px)。
- 统一定义
$breakpoints: (sm: 576px, md: 768px, lg: 992px)在变量文件中 - mixin 接收
$breakpoints-map参数（默认用全局），再用@each $key, $cols in $breakpoints-map生成媒体查询 - 这样调用时可覆盖：比如某个组件需要「桌面端也保持双列」，就传入
(mobile: 1fr, tablet: 1fr, desktop: repeat(2, 1fr))
grid-row / grid-column 类快捷键 Mixin 容易翻车
看到 @include grid-cell(1, 3, 2, 4) 就该警觉——没人记得清这四个数字对应 row-start、row-end、col-start、col-end 的顺序，而且漏掉 row-end 时浏览器默认 auto，mixin 若强制设 span 1 就会破坏隐式行为。
- 更安全的替代：封装语义位置，如
@include place-in-header、@include span-full-width，内部才处理具体行/列值 - 若真需坐标控制，至少用命名参数：
@include grid-area($row: 2, $col: 3, $span-row: 1, $span-col: 2)，避免位置依赖 - 警惕和
grid-area冲突：手动写了grid-area: sidebar，又调@include grid-cell()，后者会覆盖前者
gap 和 minmax() 必须作为独立参数暴露
网格的视觉节奏不只靠列数，gap 和单元格尺寸约束才是真实体验瓶颈。但很多人把它们塞进「列数 mixin」里，导致改间距必须改布局 mixin，耦合严重。
-
@mixin grid-card-grid应接受$gap: 1rem和$min-item-width: 300px两个独立参数 - 内部用
repeat(auto-fill, minmax($min-item-width, 1fr)))，而不是写死minmax(300px, 1fr) - gap 处理优先用原生
gap，老浏览器 fallback 用@include flex-gap($gap)（注意：这是 flex 场景，grid gap 兼容性已极好，无需模拟）
最常被忽略的点：@mixin 不是代码压缩器，而是语义锚点。当你发现某个 mixin 被调用时还要注释「这里其实是主内容+窄侧边栏」，说明命名失败；当你改一个断点值要搜三处 @media，说明断点没收敛。真正的「快」，来自改动只发生在一处——变量、断点、语义 mixin，三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
