@container 不支持 var() 作为断点值，因其语法解析早于 CSS 变量求值，断点必须为编译期确定的字面量；变量仅可用于 @container 块内属性声明，复用断点需依赖预处理器或构建工具。
@container 规则本身不能把参数存进 CSS 变量，因为容器查询的断点（比如 min-width: 400px）是条件逻辑，不是可赋值的数据。你没法写 --breakpoint-sm: 400px 然后在 @container (min-width: var(--breakpoint-sm)) 里用——浏览器不支持变量插值到 @container 条件中。
为什么 @container 不接受 var() 作为断点值
CSS 容器查询的语法解析发生在样式计算早期，此时 var() 还未求值；断点必须是编译期可确定的字面量。所有主流引擎（Chrome、Firefox、Safari）都明确拒绝这种写法：
❌ @container (min-width: var(--sm)) { ... } → 直接忽略整条规则，控制台无报错，静默失效。
真正能用变量的地方：断点值只用于 CSS 属性声明
你可以把断点数值存在变量里，但只能用在 @container 块内部的属性值中，比如 font-size、padding 或自定义属性赋值：
-
--sm: 400px可以在:root或选择器里定义 - 然后在
@container (min-width: 400px)内部写--gap: var(--sm);是合法的 - 但
400px这个数字仍得硬编码在@container条件里，不能替换成var(--sm)
想复用断点值？用预处理器或构建时替换
纯 CSS 没办法，但如果你用 Sass/Less 或构建工具（如 PostCSS），可以安全地复用：
- Sass 示例：
$sm: 400px; @container (min-width: $sm) { .card { --pad: 1rem; } } - PostCSS 插件（如
postcss-custom-properties）能在构建时把var(--sm)替换为字面量，但仅限于属性值，不支持条件语句 - 手动维护一份断点表 + 注释，比强行“变量化”条件更可靠
容易被忽略的兼容性陷阱
即使你绕过变量限制写了合法的 @container，也要注意：
立即学习“前端免费学习笔记（深入）”；
- Safari 16.4+ 才支持斜杠命名语法（
container: card / inline-size），旧版必须拆成container-name: card; container-type: inline-size; -
container-type: size在非 replaced 元素（如普通div）上可能无效，优先用inline-size - 父容器若用了
display: contents或contain: layout，可能破坏容器上下文，导致@container不触发
