断点变量必须集中定义在单个文件中，禁止多处重复声明；所有引用文件需显式@import该变量文件；mixin调用须带括号并传参；避免modifyvars覆盖；单位、字符串、减法运算须严谨。
断点重复定义不是“写多了几行”，而是变量被多次声明、覆盖或作用域错乱，最终导致编译结果不可控——比如改了@breakpoint-md却没生效，或者某个@media块里用的还是旧值。
断点变量必须集中定义在单个文件里
散落在各处的@breakpoint-sm: 576px是隐患源头。不同文件里同名变量会按@import顺序覆盖，后导入的生效，但你很难记住谁先谁后。
- 只在一个文件（如
variables.less或breakpoints.less）里定义全部断点变量 - 所有其他文件都通过
@import "variables.less";引入，禁止重复声明 - 别在组件文件顶部随手加
@breakpoint-lg: 1200px;——Less不会报错，但会静默覆盖前面的值
避免modifyVars等构建工具意外覆盖断点
Webpack项目中用less-loader的modifyVars注入主题色时，如果传入对象里也包含breakpoint*字段，它会直接覆盖你本地定义的变量，且不提示。
- 检查
vue.config.js或webpack.config.js里的modifyVars配置，确保不含@breakpoint-类键名 - 若需动态断点，应改用CSS自定义属性+JS读取，而非让构建层介入Less变量
- 本地开发时可临时加一行
.test { content: "@{breakpoint-md}"; }验证编译后是否真为768px
Mixin调用必须显式传参，不能依赖隐式作用域
写.media-md() { @media (min-width: @breakpoint-md) { @content; } }没问题，但如果你在另一个文件里只写.media-md() { color: red; }却不@import断点文件，Less编译时不会报错，而是把@breakpoint-md当空值处理，最终生成@media (min-width: )——浏览器直接忽略整条规则。
- 每个用到断点的Mixin，其定义文件必须显式
@import断点变量文件 - 调用时别省略括号：
.media-md { ... }是无效的，必须写.media-md() { ... } - 区间断点（如“仅在中屏”）要手动算减1px：
(max-width: (@breakpoint-lg - 1px))，写成@breakpoint-lg - 1会编译失败
最常被忽略的其实是变量单位：漏写px、误写成字符串"768px"、或用@breakpoint-xs: 0却忘了它在and (max-width: @breakpoint-xs - 1px)里会触发单位运算错误——这些细节不出现在控制台，只默默让媒体查询失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
