Less断点必须用语义化变量集中定义并配合Mixin封装，避免裸写@media；变量需带单位、设0值、命名清晰；Mixin要显式调用、禁嵌套；容器宽度须与断点同步更新且满足≤关系；注意编译时变量覆盖风险。
Less 本身不合并、不优化、不运行时计算媒体查询，所有“优雅”都靠编译前的设计约束和构建链路配合。 直接写 @media (min-width: 768px) 能用，但维护性差；靠变量插值进 @media 会报错；嵌套多层 @media 会导致 PostCSS 合并失效。真正的优雅来自三件事：统一断点管理、单层混合封装、构建阶段补位。
怎么定义和复用断点值才不会翻车
断点必须是已解析的数值或带单位字符串，不能是拼接后的字符串变量。Less 在编译期展开 @media 条件，不支持运行时插值。
- ✅ 正确写法：
@sm: 768px;+@media (min-width: @sm) { ... } - ❌ 错误写法：
@sm: ~"(min-width: 768px)";+@media @sm { ... }→ 编译报Invalid CSS after "@media" - ⚠️ 混合里用条件判断时，
&when只控制是否生成该块，不改变@media内部语法结构 - 推荐把所有断点集中放在
_variables.less，例如：@screen-xs: 480px;、@screen-sm: 768px;、@screen-md: 992px;
为什么用 .media-sm() 混合比直接嵌套 @media 更可靠
Less 允许在选择器内写 @media，但它会自动提升并拼接父选择器，逻辑清晰但层级受限。而混合（Mixin）能封装参数、复用逻辑、避免嵌套过深，更重要的是——它产出的是扁平的 @media 块，PostCSS 合并工具能识别。
- 嵌套写法：
.btn { @media (hover: hover) { &:hover { color: blue; } } }→ 编译为@media (hover: hover) { .btn:hover { ... } }，没问题，但无法跨组件复用断点逻辑 - Mixin 写法：
.media-sm() { @media (min-width: @screen-sm) { @content(); } }，调用时.card { .media-sm() { width: 750px; } } - 关键优势：所有
.media-sm()展开后都是顶层@media (min-width: 768px)，PostCSS 插件如postcss-combine-media-query才能真正合并重复块 - 别在 mixin 里再嵌
@media——.media-sm() { @media (prefers-reduced-motion: reduce) { @content(); } }会产出嵌套@media，PostCSS 直接跳过
PostCSS 合并媒体查询为什么经常失效
不是插件坏了，而是输入 CSS 不符合它的处理前提：必须是扁平、顶层、无嵌套的 @media 块。Less 编译后若存在嵌套媒体查询，或构建顺序不对，合并就静默跳过。
立即学习“前端免费学习笔记（深入）”；
- 检查最终输出的 CSS 文件，确认所有
@media都是顶级规则，没有@media { @media { ... } }结构 - Webpack 中确保
postcss-loader在css-loader之后、cssnano之前执行，且postcss-combine-media-query启用 - Vue CLI 或 CRA 默认可能禁用该插件，需手动在
postcss.config.js中显式添加 - 如果用了
less-loader的additionalData注入变量，确保它不干扰@media解析顺序
最常被忽略的一点：Less 编译只负责语法转换，它不管“语义重复”。两个组件各自写了 .media-md() { @media (min-width: 992px) { ... } }，Less 就原样输出两段。想合并，就得靠 PostCSS；想避免重复，就得靠团队约定只通过混合调用；想动态组合断点，就得用 mixin 参数，而不是变量插值。
