断点 mixin 未生成 @media 规则最常见原因是断点 map 为空或 key 不匹配，如定义 "md" 却调用 "medium"；@include 必须在 css 规则块内使用；em 断点受根字号影响而“失效”；混用 @container 和 @media 易导致样式冲突。
断点 mixin 编译后没生成对应 @media 规则
最常见原因是断点 map 为空或 key 未匹配——比如定义了 $breakpoints: ("md": 48em)，但调用时写成 @include breakpoint("medium")，Sass 找不到 "medium" 这个 key，map-get() 返回 null，整个 @media 块被跳过，CSS 里压根不出现。
实操建议：
- 在
@mixin breakpoint内加@debug map-keys($breakpoints)，确认运行时 map 确实含你传入的 key - 避免用字符串拼接 key（如
"#{$prefix}-md"），除非你确保$prefix在调用时已定义且非空 - 检查是否误用了
@forward "breakpoints" as *导致命名空间污染，让外部$breakpoints被覆盖为 undefined
@include breakpoint() 写在错误位置导致无效
Sass 的 @include 必须出现在 CSS 规则块内部，也就是有选择器和大括号包裹的上下文中。如果写在顶层、变量声明后、或 @function 定义里，它不会触发媒体查询输出，DevTools 里也看不到对应规则。
实操建议：
- 正确写法：
.card { @include breakpoint(md) { width: 100%; } } - 错误写法：
@include breakpoint(md) { .card { width: 100%; } }（这会报错或静默失败） - 若需全局断点样式，改用
@at-root显式提升作用域：@at-root { @media (min-width: 48em) { .card { width: 100%; } } }
em 断点在缩放或动态根字号下“看似不触发”
不是 mixin 失效，而是计算基准变了：48em 对应的是当前 html 的 font-size。用户缩放页面或 JS 动态改了根字号（如 document.documentElement.style.fontSize = "20px"），48em 就变成 48 × 20 = 960px，远超你预期的 768px。
访问全球海洋潮汐模型。功能包括查询指定日期、时间和地点的潮高、潮汐极值及格点天气数据。
实操建议：
- 调试时固定根字号：
html { font-size: 16px !important; }，排除干扰 - 用 DevTools 的 Rendering 面板开启 “Emulate CSS media features”，手动设
device-pixel-ratio和视口宽度验证 - 不要用 JS 的
window.innerWidth和48 * parseFloat(getComputedStyle(document.documentElement).fontSize)对比——两者单位一致，本就该相等；真正要对比的是媒体查询生效时的 computedwidth
混用 @container 和 @media 导致逻辑冲突
当组件同时用了 @include breakpoint(lg) 和 @container (inline-size > 64em)，两个条件独立触发，样式可能互相覆盖。Sass mixin 不感知容器查询，它只生成静态 @media，无法协调两种响应机制。
实操建议：
- 明确分层：布局级（如栅格、页眉）用
@mixin viewport-breakpoint，组件级（如卡片、列表项）用@container - 禁用同一 mixin 同时支持 media/container 模式——参数爆炸，
@content注入点难控制，DevTools 里无法区分来源 - 若必须兼容旧代码，新建独立的
@mixin container-breakpoint，底层直接用@container，不复用 media mixin 的 map 和逻辑
真正卡住人的地方，往往不是语法写错，而是断点值在运行时被覆盖、@include 被塞进非规则上下文、或者 em 单位在动态根字号下悄悄漂移——这些都不会报错，只会让样式“消失”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
