less中extend不跨@media继承是设计行为，因css媒体查询作用域独立，编译时仅匹配同级或嵌套于同一@media内的选择器，以保障响应式逻辑正确性。
extend在@media内无法继承外部选择器，这是设计行为，不是bug
Less的extend作用域默认不穿透@media边界。也就是说，如果.base定义在顶层（非媒体查询内），而.derived:extend(.base)写在@media print块里，编译时不会匹配到.base——它被直接忽略。
这不是解析失败，而是Less明确规定的规则：媒体查询内部的extend只查找**同级或嵌套在该@media内的选择器**。
-
@media print { .print-btn:extend(.btn) {} }→ 只会匹配@media print块里已声明的.btn，哪怕顶层也有一个.btn，也视而不见 - 反过来，顶层的
.ui-card:extend(.card)能匹配@media screen里的.card，因为非媒体查询的extend会扫描所有媒体查询中的匹配项 - 同一
@media块内，顺序无关：.a:extend(.b)写在.b前面也能生效
为什么不能跨@media继承？根源是CSS输出模型
Less的extend本质是编译期选择器合并，最终生成的是纯CSS。而CSS本身没有“跨媒体查询继承”这个概念——每个@media块是独立的样式作用域，浏览器按块解析、按条件应用。如果允许extend跨块合并，就等于强行把不同媒体条件下的选择器耦合进同一组声明，破坏语义隔离。
比如你希望.mobile-only:extend(.shared)在@media (max-width: 768px)里生效，同时又想让顶层.shared样式也参与合并。这会导致生成类似@media (max-width: 768px) { .shared, .mobile-only { ... } }的代码，但.shared本意可能是全局可用的，现在却被锁死在移动断点里。
- 编译后CSS必须保持各
@media块的独立性，否则响应式逻辑会错乱 - Less不模拟运行时行为，它只做静态选择器拼接，无法推断“这个类是否应该出现在打印样式里”
- IE8及更早版本甚至不支持
@media，跨媒体查询的extend会直接导致兼容性断裂
替代方案：用mixin + 条件变量或拆分基础类
当需要复用带媒体逻辑的样式时，extend失效的地方，mixin是更可控的选择。关键不是“换语法”，而是把复用单元从“选择器”转向“样式声明”。
- 把公共样式抽成
.shared-styles()mixin，然后在各@media块里分别调用：@media screen { .btn { .shared-styles(); } } - 若需动态控制，配合
@media-type: screen这类变量 +if()判断（Less 4.0+），避免硬编码多份 - 极端情况可反向操作：把基础类本身放进
@media all块中，确保它在所有上下文都可见，再让各媒体查询内的extend去引用它 - 注意：不要用
@import来绕过作用域——导入的文件仍受所在@media块约束，不会自动提升作用域
容易被忽略的调试陷阱：空行和注释会让extend“失联”
Less对extend目标的选择器匹配非常严格。如果.base前面有空行或注释，.derived:extend(.base)可能完全找不到它，且不报错，静默失败。
- 错误写法：
// 基础样式<br>.base { color: red; }→ 注释后紧跟.base，没问题；但若中间插了空行，extend大概率失效 - 安全做法：把所有被
extend的目标类集中放在文件顶部，不加空行、不加注释分隔 - Webpack用户额外注意：
less-loader7.x 默认math=always，可能干扰extend解析，建议显式配置math: 'strict' - 调试技巧：编译后搜索输出CSS里是否存在
.base, .derived这样的逗号分隔组合——没有，基本就是匹配失败
真正难处理的不是语法写错，而是extend在媒体查询里“看起来像生效了”，实际却漏掉了某些断点下的样式合并，这种问题往往要到打印预览或窄屏测试时才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
