less断点必须用语义化变量集中定义并配合mixin封装，避免裸写@media；变量需带单位、设0值、命名清晰；mixin要显式调用、禁嵌套；容器宽度须与断点同步更新且满足≤关系；注意编译时变量覆盖风险。
Less 本身不提供断点管理能力，所有断点逻辑都靠变量 + Mixin 手动封装；直接写 @media (min-width: 768px) 看似快，但改一次断点值就得全局搜索替换，维护成本爆炸。
断点必须用语义化变量集中定义
散落在各处的像素值（比如 768px、992px）不是“能用”，而是“迟早出错”。真正可控的做法是把它们收口到一个文件（如 variables.less），统一用带单位的数值变量：
-
@breakpoint-xs: 0;—— 必须设为0，不是省略，否则 Mixin 判断逻辑容易断裂 -
@breakpoint-sm: 576px;—— 所有值必须带px单位，@breakpoint-sm: "576px"是字符串，@media里会编译失败 - 别用
@sm-min或@screen-sm这类冗余后缀，Less 不支持变量名插值，@@{sm}-min会报错 - 变量名要语义清晰，协作时别人一眼知道
@breakpoint-lg对应大屏，而不是猜@bp3
用 .media() Mixin 封装媒体查询逻辑
裸写 @media 容易漏括号、写反 min-width/max-width、边界值计算错（比如该减 1px 却没减）。Mixin 的作用不是炫技，是固化规则：
- 推荐用
@@breakpoint变量插值语法，比如@media (min-width: @@breakpoint)，传入@breakpoint-md就自动展开为768px - 区间断点（如“仅在平板”）必须显式写成两个条件：
@media (min-width: @breakpoint-md) and (max-width: (@breakpoint-lg - 1px))，注意括号和单位缺一不可 - 别在 Mixin 里嵌套另一个 Mixin（比如调用
.flex-center()），容易触发 Less 递归警告，布局逻辑应抽成独立 class - Mixin 必须被显式调用，只定义不写
.media(@breakpoint-md) { color: red; }，编译结果里就什么也没有
断点变量和容器宽度必须同步更新
改了 @breakpoint-lg: 992px，但忘了同步 @container-max-widths 里的对应值，页面就会在某个宽度下突然撑破或留白异常：
-
@container-max-widths: { sm: 540px; md: 720px; lg: 960px; xl: 1140px; };—— 这个 map 要和断点变量保持比例关系 - 取值必须用
map-get(@container-max-widths, sm)，不能手写540px，否则变量改了这里就成了硬编码黑洞 -
@container-max-widths[sm]必须 ≤@breakpoint-sm，否则小屏下容器反而比断点宽，媒体查询失效
最常被忽略的其实是编译一致性：Webpack 项目里如果用了 less-loader 的 modifyVars 注入主题色，它可能意外覆盖你本地定义的 @breakpoint-* 变量，导致断点失效却不报错——得确认变量注入顺序和覆盖策略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
