SCSS 无法编译出真正的容器查询，因为 @container 是浏览器运行时基于实际渲染尺寸计算的，而 SCSS 是编译时工具，无法获取 DOM 布局信息；它只能通过 map 统一管理断点、生成 @container 规则及媒体查询 fallback。
SCSS 本身不支持原生容器查询（@container），但你可以用 SCSS 模拟“类容器查询”的行为——即基于父容器宽度动态生成断点样式，前提是父容器已设 container-type: inline-size，且你控制其尺寸逻辑。真正在 CSS 层面生效的容器查询必须靠浏览器原生支持（Chrome 105+、Safari 16.4+、Firefox 110+），SCSS 只能辅助生成配套的 @container 规则和 fallback 媒体查询。
为什么不能直接用 SCSS 编译出真正的容器查询？
因为 @container 是运行时由浏览器计算的，它依赖 DOM 中实际渲染的容器尺寸，而 SCSS 是编译时预处理工具，无法获知运行时布局信息。你写的 @container (min-width: 300px) { ... } 必须原样输出到 CSS，SCSS 只能帮你：
- 避免手写重复的
@container块 - 复用同一套断点值（如
"sm": 300px）同时服务媒体查询和容器查询 - 自动生成带 fallback 的双层规则（
@media+@container）
如何用 $breakpoints map 同时支撑媒体查询和容器查询
关键不是重写逻辑，而是让断点定义一次、多处引用。必须用 map，否则 map-get($breakpoints, "sm") 返回 null，编译直接失败：
@use "sass:map";
$breakpoints: (
"sm": 300px,
"md": 500px,
"lg": 700px
);
@mixin container-query($breakpoint) {
@if map-has-key($breakpoints, $breakpoint) {
@container (min-width: map-get($breakpoints, $breakpoint)) {
@content;
}
}
}
// 调用示例：
.card {
width: 100%;
@include container-query("md") {
width: 50%;
}
}
⚠️ 注意：@container 规则只对设置了 container-type: inline-size（或 size）的祖先元素生效，SCSS 不会自动加这个声明——你得在 HTML 或父级 CSS 里手动写。
立即学习“前端免费学习笔记（深入）”；
怎么给容器查询加可靠的媒体查询 fallback
不是简单并列两个规则，而是用嵌套 mixin 确保语义一致。用户没开容器查询支持时，退回到视口级响应式：
@mixin cq-fallback($breakpoint) {
// 先输出容器查询（现代浏览器）
@container (min-width: map-get($breakpoints, $breakpoint)) {
@content;
}
// 再输出媒体查询 fallback（所有浏览器）
@media (min-width: map-get($breakpoints, $breakpoint)) {
@content;
}
}
// 使用：
.card {
@include cq-fallback("md") {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
}
这样生成的 CSS 包含两套规则，浏览器会按支持度选择执行；但注意：如果父容器宽度
流体网格容器中容易被忽略的单位陷阱
容器查询的 min-width 值必须是绝对单位（px、em、rem），不能是百分比或无单位数字。常见错误：
-
"sm": 30%→ 编译报错：Invalid null operation -
"sm": 300（缺单位）→ 同样报错 -
"sm": 300vw→ 语法合法但语义错误，容器查询基于父容器宽度，不是视口
推荐统一用 px：它最直观、兼容性最好、与设计稿对齐方便。若需适配缩放，可改用 em（前提是父容器字号稳定）。
真正难的是协调容器尺寸、container-type 声明、SCSS 断点值、以及 fallback 逻辑四者的一致性——漏掉任意一环，容器查询就静默失效，且很难 debug。
