不能直接用SCSS封装@container规则，因其是浏览器原生解析的CSS规则，SCSS编译器不识别该at-rule，无法展开或嵌套；正确做法是用SCSS管理容器声明和断点变量，@container查询逻辑必须保留在原生CSS中。
不能直接用 SCSS 封装 @container 规则——它不是媒体查询，SCSS 的 @mixin 无法生成合法的容器查询语法。 因为 @container 是 CSS 原生规则，必须由浏览器解析，而 SCSS 编译器在构建阶段就结束了，不识别 @container，更不会把它“展开”或“嵌套”进输出 CSS 中。
为什么 @mixin respond-to 对 @container 完全失效
SCSS 的 @mixin 本质是文本替换 + 编译时求值。它能处理 @media 是因为：@media 是 CSS 标准规则，且其条件（如 (min-width: 768px)）是静态可计算的。但 @container 要求：
- 目标元素必须显式声明
container-type（如inline-size） - 查询必须写在独立的
@container规则块中，且只能作用于该容器的后代元素 - 条件语法如
(inline-size > 100px)不是媒体查询语法，SCSS 无法安全拼接或校验
如果你强行在 @mixin 里写 @container，SCSS 编译器会直接报错或静默忽略——它根本不认识这个 at-rule。
正确配合方式：SCSS 只负责“声明容器”，CSS 原生写查询
把 SCSS 当作“结构辅助工具”，只做三件事：定义容器类、管理断点值、生成容器命名。真正查询逻辑留在纯 CSS 中。
立即学习“前端免费学习笔记（深入）”；
示例工作流：
- 用 SCSS 变量存容器尺寸阈值：
$container-sm: 320px; - 用 SCSS 类封装容器声明：
.c-card {<br> container-type: inline-size;<br> container-name: card;<br>} - 在
.css文件（或.scss中顶层）写原生@container：@container card (inline-size > #{$container-sm}) {<br> .c-card__title { font-size: 1.25rem; }<br>}
注意：#{$container-sm} 是 SCSS 插值，仅用于把变量值注入到 CSS 字符串中，不改变 @container 的原生语义。
容易踩的坑：命名冲突与作用域限制
container-name 是全局作用域，不是选择器局部作用域。以下写法危险：
- 多个组件都用
container-name: card;→ 查询会互相干扰 - 在 SCSS
@each循环中动态生成container-name→ 编译后仍是静态字符串，无法解决命名冲突 - 试图在
@container规则里写&嵌套（如&__header）→ SCSS 不支持在@container内部做选择器嵌套，必须写完整后代选择器
推荐做法：用 BEM 风格前缀隔离命名，比如 container-name: c-card;、container-name: c-list;，并在对应 @container 规则中严格匹配。
真正难的不是写法，而是想清楚「谁该当容器」——@container 必须绑定到有明确尺寸边界的元素上，比如卡片、侧边栏、网格项；父级 flex 容器或未设宽高的 div 无法成为有效容器。这点比语法本身更容易被忽略。
