断点变量必须集中定义在独立文件中并用 @import (reference) 引入，再通过带参数的 .media(@bp) mixin 调用；否则将导致变量未定义、重复输出和编译错乱。
直接结论：断点变量必须收口到独立文件，用 @import (reference) 引入，再通过带参数的 .media() Mixin 调用——否则变量未定义、重复输出、编译错乱全都会发生。
断点变量必须集中定义在单独文件里
散落在组件文件顶部的 @breakpoint-sm: 576px 看似方便，实际会引发三类问题：变量被覆盖、编译顺序错乱、改一处漏十处。Less 变量是纯文本替换，没有作用域，@import 顺序决定可见性。
- 新建
variables/breakpoints.less，只放断点定义：@breakpoint-xs: 0;、@breakpoint-sm: 576px;、@breakpoint-md: 768px;等，全部带单位 - 所有其他文件统一用
@import (reference) "variables/breakpoints.less";引入——(reference)关键字防止该文件自身输出 CSS - 禁止在 mixins 或组件文件里重复声明断点变量，哪怕值一样；否则
modifyVars或主题切换时极易被意外覆盖
用 .media(@bp) 而不是 .media-sm()
写死名称的 Mixin（如 .media-sm()）会让断点逻辑和具体像素强耦合，违背“改一处、全生效”原则。参数化调用才是解耦核心。
- 定义 Mixin 时用变量插值：
.media(@bp) { @media (min-width: @@bp) { @content(); } }，注意是@@bp，不是@bp - 调用时传变量名：
.media(@breakpoint-md) { color: red; }，而非字符串.media("md")——后者编译直接报错 - 加守卫更稳妥：
.media(@bp) when (isnumber(@@bp))，避免传入未定义变量导致静默失败
区间断点别硬拼 and (max-width: ...)
手动写 @media (min-width: @breakpoint-md) and (max-width: @breakpoint-lg - 1px) 容易出错：单位缺失、边界计算错位、括号漏写。Less 对运算类型极其敏感。
- 必须写成
(@breakpoint-lg - 1px)，不能是@breakpoint-lg - 1，否则报Operation on an invalid type - 更推荐拆成两个独立断点：
.media(@breakpoint-md) { ... }+.media-down(@breakpoint-lg) { ... }，后者封装@media (max-width: @@bp - 1px) - 避免在同一个 Mixin 里塞多条件（如横屏+DPI），优先用组合调用：
.media(@breakpoint-md) { .media-landscape() { ... } }
真正容易被忽略的是：断点变量和容器宽度变量（如 @container-max-widths）必须同步更新。改了 @breakpoint-lg: 992px 却忘了改 @container-max-widths[lg]: 960px，页面会在 960–991px 区间内既不走小屏逻辑也不走大屏逻辑——这个空隙不会报错，只会让布局突然错乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
