编译失败是因@media后直接使用未展开的变量，less要求媒体查询条件必须为合法括号结构；变量仅可代入数值或带单位部分，组合断点需用mixin封装，嵌套时须加&确保选择器有效，且需检查构建链路中@import顺序、loader配置及压缩工具影响。
编译失败不是因为“用了变量”，而是 @media 后面直接插了未展开的变量——Less 不允许把整个媒体查询条件当变量塞进去，这种写法会触发 Invalid CSS after "@media" 错误。
为什么 @media @sm 会报错
Less 要求 @media 后必须紧跟合法的括号条件，比如 @media (max-width: 768px)。它不接受变量作为整个条件字符串。
- ❌ 错误写法：
@sm: ~"(max-width: 768px)"; @media @sm { ... }→ 编译器看到@media @sm就卡住，报Invalid CSS after "@media" - ✅ 正确写法：
@sm: 768px; @media (max-width: @sm) { ... }→ 变量只提供数值或带单位的部分，括号和逻辑符（max-width:、and）必须手写 - 如果要用组合断点（如
min-width+max-width），必须封装成 mixin：.media-between(@min, @max) { @media (min-width: @min) and (max-width: @max) { @content; } }
@media 嵌套时漏掉 & 导致最终 CSS 无效
嵌套写法本身没问题，但漏掉 & 会让生成的 CSS 没有选择器，浏览器直接忽略整块规则。
- ❌ 错误：
.nav { @media (max-width: 768px) { display: none; } }→ 编译出@media (max-width: 768px) { display: none; }（无选择器，无效） - ✅ 正确：
.nav { @media (max-width: 768px) { & { display: none; } } }→ 编译出@media (max-width: 768px) { .nav { display: none; } } - 注意：
&只绑定当前父级，不能跨层引用更外层的选择器
构建链路中 @media 被删或错位
Less 编译成功 ≠ 最终 CSS 里有这条规则。Webpack/Vite 构建过程可能把它干掉。
-
css-loader的importLoaders配置不对，会把@media当普通规则处理，提取时丢失结构 - 压缩工具（如
cssnano）默认开启discardDuplicates，可能误删“看起来重复”的媒体查询块 -
PostCSS插件（如autoprefixer）必须作用于 Less 编译后的结果，而不是源文件；否则它根本看不到@media - 验证方法：打开最终产出的
.css文件，搜索@media，确认规则是否完整、是否有选择器、位置是否在对应基础样式之后
最容易被忽略的是：你写的 @media (max-width: @sm) 看似合法，但如果 @sm 本身没定义（比如 @import "vars.less" 写在后面，或文件为空），Less 会在那行直接中止，后续所有内容都不编译——此时你看到的不是报错，而是一段空 CSS 或残留的 @media @sm 字符串。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
