less 4.x 不支持 container queries 的编译或生成逻辑，仅原样输出 @container 规则，不解析、不校验、不支持变量或条件判断，所有功能依赖浏览器运行时处理。
Less 4.x **本身不支持 Container Queries 的编译或生成逻辑**——它不会解析 @container 规则，也不会校验 container-type 或 container-name。所谓“在 Less 中使用 Container Queries”，实际只是把原生 CSS 语法原样输出，不能依赖 Less 做任何计算、条件判断或变量注入。
为什么 Less 编译器对 @container 视而不见
Less 是纯编译期预处理器，只处理变量、混合、嵌套和基础运算；@container 是浏览器运行时才解析的 CSS 标准规则（2023 年起全平台稳定支持），不属于 Less 语法范畴。如果你写了：
@container (min-width: 400px) {
.card { display: flex; }
}
Less 会直接透传这整段代码到输出 CSS 中，不做任何检查、展开或报错——哪怕你拼错了 @container 写成 @contianer，它也照常输出，直到浏览器执行时才静默忽略。
常见错误现象：
-
@container card (min-width: @breakpoint-md)编译失败：Less 不允许在@container条件中使用变量，会报ParseError: expected expression - 试图用
if()控制@container块是否生成：无效，@container不是 Less 规则，when混合无法包裹它 - 把
container-type: inline-size写在.card__content上却没生效：这不是 Less 的问题，而是 CSS containment 要求容器必须有明确尺寸上下文（如非display: contents）
怎样安全地在 Less 项目中输出 Container Queries
唯一可靠方式是：把 @container 当作普通 CSS 字符串写死，所有尺寸值用具体数字（带单位），避免任何 Less 变量插值。
- ✅ 正确写法：
@container (min-width: 480px) { .card { grid-template-columns: 1fr 2fr; } } - ❌ 错误写法：
@container (min-width: @sm) { ... }（变量不被识别） - ❌ 错误写法：
@container card (min-width: 480px) { ... }（命名容器需先在 HTML 元素上声明container-name，Less 无法帮你生成该 HTML 属性） - 断点仍可用 Less 变量管理，但仅限于独立声明，不参与
@container表达式：@container-sm: 480px;→ 后续手动复制粘贴数值，不推荐自动替换
如何配合 BEM 和构建流程避免漏掉 container-type
Container Queries 生效的前提是 HTML 元素显式设置了 container-type，而 Less 无法生成或校验这个属性。必须靠开发者在模板（如 JSX、Vue SFC 或 HTML）中手动添加，或由构建工具注入。
- 推荐在 BEM Block 根节点统一加：
<div class="card" style="container-type: inline-size"> <li>避免用 <code>display: contents或position: absolute破坏 containment 上下文 - 若用 Webpack/Vite，可配 posthtml 插件自动为匹配
.card的元素注入container-type，但这类逻辑不应放在 Less 层 - 不要指望
.respond-to()这类响应式 mixin 能适配@container—— 它们专为@media设计，语义和机制完全不同
真正容易被忽略的一点：Container Queries 的生效依赖浏览器 layout 阶段计算容器尺寸，而 Less 输出的 CSS 只负责提供规则文本。如果你发现 @container 不触发，90% 的情况是 HTML 结构没设 container-type，或者容器本身没有确定宽度（比如父级 display: flex 未设 width 或 flex-basis）。Less 在这件事上完全帮不上忙，也无从报错。
