Less断点应统一用无单位数字定义并配合unit()加单位，存为map并通过守卫Mixin调用，避免硬编码和字符串解析；媒体查询内不嵌套布局Mixin，构建工具需正确监听@import文件。
Less 里不能靠写死 @media 实现“类似媒体查询”的抽象——它本身就是媒体查询，关键在于怎么把断点值、逻辑、单位全部收口，避免改一个数满项目搜。
断点变量必须用纯数字定义，单位靠 unit() 拼
直接写 @breakpoint-sm: 576px 看似省事，但后续在 @media 里引用时容易漏单位或类型错乱。Less 编译器只做文本替换，@media (min-width: @breakpoint-sm) 若变量带单位，可能拼出 min-width: 576pxpx；若不带，又变成无效语法 min-width: 576。
- 统一用无单位数字定义：
@breakpoint-sm: 576、@breakpoint-md: 768 - 所有媒体查询中显式加单位：
@media (min-width: unit(@breakpoint-sm, px)) - 需要 rem 时走函数转换：
.to-rem(@px) { @rem: unit(@px / 16, rem); }，再调用.to-rem(576); @media (min-width: @rem)
.media-sm() 这类 Mixin 必须用 map-get + when (isdefined(...)) 守卫
硬编码 .media-sm() { @media (min-width: 576px) { ... } } 失去变量意义；而传字符串参数如 .media("sm") 会直接报错 Expected variable, function or keyword，因为 Less 不支持运行时字符串解析。
- 断点存为 map：
@breakpoints: { sm: 576, md: 768, lg: 992 }; - Mixin 接键名参数：
.media(@size) when (isdefined(@breakpoints)) { @val: map-get(@breakpoints, @size); @media (min-width: unit(@val, px)) { @content(); } } - 调用时写
.media(sm) { color: red; }，安全且可扩展
别在 @media 块里嵌套另一个 Mixin，尤其是带布局逻辑的
比如在 .media-sm() 内部直接写 .flex-center()，Less 可能触发递归编译警告，更严重的是语义污染：媒体查询应只管“何时生效”，布局行为该由独立 class 承担。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：媒体查询内只写 class 名或属性，不展开结构逻辑
- 错误写法：
.media-sm() { .flex-center(); width: 100%; } - 推荐写法：
.media-sm() { .nav-responsive-sm { .flex-center(); width: 100%; } }，把样式职责切开 - 注意嵌套层级：
&在@media内只绑定当前父选择器，跨层引用会失效
修改 breakpoints.less 后样式没更新？检查构建工具是否监听了 @import 链
Less 本身不追踪被 @import 的文件变更，Webpack 的 less-loader 默认只监听入口文件。改了 variables.less 却没热更新，大概率是 loader 没配置 paths 或没启用 watchOptions。
- 用别名导入：
@import "~@styles/breakpoints.less";，并在less-loader中配paths: [path.resolve(__dirname, 'src/styles')] - 避免相对路径
@import "../config/breakpoints.less"，它容易被缓存或忽略 - 如果用了
modifyVars（如 vue-cli 主题注入），断点变量绝不能放@import文件里——会被覆盖成@breakpoint-sm: undefined，最终编译出@media (min-width: 0)
真正难的不是写出一个 .media-up()，而是让所有团队成员改断点时，只打开一个文件、只改一行数字、不 grep、不猜、不试错。变量命名、文件组织、构建链路，三者缺一不可。
