正确做法是用变量定义断点并以守卫式Mixin封装.respond-to()，禁用字符串拼接和硬编码；@media后不可直接跟变量，须写为@media (min-width: @breakpoint-sm)；守卫需用when判断参数，复合条件应嵌套&语法实现。
直接结论：用变量定义断点 + 守卫式 Mixin 封装 .respond-to()，别拼字符串、别硬编码、别在 @media 后直接插变量。
为什么 @media @breakpoint-sm 会编译失败
Less 不允许把变量直接放在 @media 关键字后面。写成 @media @breakpoint-sm 会被识别为非法语法，报错 Invalid CSS after "@media"。它只接受字面媒体查询条件，比如 @media (min-width: 768px)。
常见翻车写法：
-
@bp: 768px; @media @bp { ... }→ 编译失败 -
@mq: ~"(min-width: @{bp})"; @media @mq { ... }→ 同样非法 -
@media (min-width: @breakpoint-sm)→ ✅ 正确，但必须确保@breakpoint-sm已定义且带单位（如768px）
.respond-to() Mixin 必须用 when 守卫判断参数
靠字符串参数匹配断点名，比传像素值更安全、可读性更强，也方便后期统一替换命名逻辑。
立即学习“前端免费学习笔记（深入）”；
典型实现要点：
- 每个断点分支用
when (@breakpoint = sm)显式守卫，避免参数类型错误导致静默失效 - 区间断点（如
between-md-lg）需手动计算上界：@breakpoint-lg - 1px，防止相邻断点间出现 1px 空隙 - 必须包含
@content()，否则调用时写的内容不会被注入到媒体查询内 - 禁止漏写
.respond-to(@breakpoint) { ... }的括号体，否则整个 Mixin 不生效
示例：
.respond-to(@breakpoint) when (@breakpoint = md) {
@media (min-width: @breakpoint-md) {
@content();
}
}
.respond-to(@breakpoint) when (@breakpoint = between-md-lg) {
@media (min-width: @breakpoint-md) and (max-width: @breakpoint-lg - 1px) {
@content();
}
}移动端优先下，min-width 比 max-width 更可靠
用 @media (max-width: 767px) 做“小屏兜底”，看似合理，实际容易出问题：
- 断点间隙：若
@breakpoint-sm: 576px，@breakpoint-md: 768px，那么767px和768px之间没有重叠，但767.5px这种设备宽度可能被两个规则同时忽略 - 层叠风险：后续
min-width规则可能意外覆盖max-width规则，尤其在嵌套组件中 - 维护成本高：每加一个断点，都要同步更新前后两个
max-width值，极易漏改
推荐做法：所有断点变量严格递增，只用 min-width 向上增强，xs 层级默认样式不包 @media，靠自然层叠生效。
复合条件（横屏、高DPI）必须用嵌套 & 语法，别拼字符串
想加 orientation: landscape 或 (-webkit-min-device-pixel-ratio: 2)？别写成 ~"(min-width: @{bp}) and (orientation: landscape)" —— 字符串插值无法被 Less 类型系统校验，编译不报错，但生成的 CSS 可能无效或语法错误。
正确方式是让 Mixin 接收第二个参数，并用 & 在媒体查询内部嵌套生成：
.respond-to(@breakpoint, @feature) when (@feature = landscape) {
@media (min-width: @breakpoint) and (orientation: landscape) {
@content();
}
}这样既保持语义清晰，又能让 Less 在编译期检查参数合法性。多个条件叠加时，靠嵌套调用更可控，比如先 .respond-to(@md)，再在里面写 @media (hover: hover) { ... }。
最容易被忽略的是：断点变量未定义、@content() 漏写、守卫条件没匹配上——这三者都不会触发编译错误，但最终 CSS 里压根没生成对应规则，得去检查编译输出才能发现。
