less混合宏（.mixin）不可被:extend()继承，因其编译时内联展开、不生成真实css选择器；:extend()仅作用于最终输出的选择器，需通过分离混合宏与无参基础选择器实现复用与继承兼顾。
Less 的混合宏（.mixin）不是选择器，它不生成独立的 CSS 规则，所以根本无法被 :extend() 继承 —— 这不是限制，而是设计使然。
混合宏本质是“代码插入”，不是“样式声明”
混合宏在编译时直接展开为内联样式，不留下任何可被引用的 CSS 选择器。比如：
.center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.box { .center(); width: 200px; height: 200px; }
编译后输出的是：
.box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; }
注意：.center 这个名字在最终 CSS 里完全不存在 —— 它只是 Less 编译器内部的一个“模板占位符”，不会落地为真实选择器。
所以当你写 .other:extend(.center) 时，Less 找不到匹配的、已输出的 CSS 选择器，会静默忽略或报错（取决于版本）。
继承（:extend()）只作用于真实存在的选择器
:extend() 的机制是：找到目标选择器（如 .base）在 CSS 中实际生成的规则块，然后把当前选择器“加到它的选择器列表里”。它操作的是最终 CSS 的结构，不是 Less 源码的逻辑关系。
这意味着：
-
.base { color: red; }→ 可被继承，因为它会原样出现在 CSS 中 -
.base() { color: red; }→ 不可被继承，因为括号写法表示“无输出混合”，编译后什么都不会留下 -
.base { color: red; }和.base() { color: red; }看似一样，但前者是类选择器，后者是混合宏 —— 名字相同也不代表同一事物
想复用又想支持继承？得拆成两层
如果既要参数化（混合宏的优点），又要被其他选择器继承（:extend() 的优势），必须手动分离职责：
- 用带括号的混合宏（
.mixin(@a) { ... }）封装逻辑和参数计算 - 另写一个无参、可输出的选择器（
.mixin-base { .mixin(10px); }），作为继承锚点 - 需要继承的地方写
.target:extend(.mixin-base)
例如：
.pos-center(@offset: 0) {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: @offset;
}
.pos-center-base { .pos-center(0); } // 显式落地为真实选择器
.modal { .pos-center(10px); } // 直接展开，带参数
.dialog:extend(.pos-center-base) {} // 继承无参版本
容易被忽略的关键点
Less 编译分两步：先解析混合宏并展开，再处理 :extend()。这意味着 :extend() 看不见混合宏里的变量、参数或条件逻辑 —— 它只认最终生成的 CSS 选择器名。一旦你依赖 @_ 匹配模式或默认参数做分支，那些分支路径就更不可能被继承捕获。混合宏和继承走的是两条完全不同的编译通路，强行混用只会让行为变得不可预测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
