:extend() 生成选择器并集而非复制样式，要求精确匹配源选择器（含空格、层级、伪类等），支持 all 关键字继承复合选择器，但需避免与 mixin 混用、嵌套作用域失效及基类过度具体化。
:extend() 不是“复制样式”，而是生成并集选择器。它能真正减少最终 CSS 文件体积，但用错地方反而会让选择器变复杂、覆盖逻辑失控。
继承必须精确匹配选择器，不能只写类名
Less 的 :extend() 要求括号里的选择器和定义处**完全一致**，包括空格、层级、伪类等。比如：
.container .item { color: blue; } 只能被 .sub:extend(.container .item) 继承，写成 .sub:extend(.item) 会报错：extend '.item' has no matches。
- 嵌套结构也要照抄：
.card:hover .title必须用:extend(.card:hover .title) - 媒体查询内定义的样式，只能被同 media 块内的
:extend()匹配 - 变量名不能直接用于
:extend()参数，@cls: .btn;+.x:extend(@cls)会失败
用 all 关键字继承带修饰的选择器
默认情况下，:extend(.foo) 只匹配独立声明的 .foo；如果目标样式写在 .bar .foo 或 .foo.bar 这类复合选择器里，就得加 all：
.base { font-weight: bold; }.section .base { color: #333; }.highlight:extend(.base all) { background: yellow; }
编译后：.base, .section .base, .highlight { font-weight: bold; } —— 三个地方都生效。
- 不加
all：只继承独立.base的规则 - 加
all：继承所有含.base的选择器组合（如.a .base、.base.active） -
all会扩大影响范围，慎用于通用工具类
避免和 mixin 混用导致选择器爆炸
mixin 是复制属性，:extend() 是合并选择器。两者混用容易让 CSS 输出不可控：
比如同时写了 .btn:extend(.reset) 和 .btn { .reset(); }，结果是：.reset, .btn { ... } + .btn { ... } 两份重复声明。
- 功能单一复用 → 优先用
:extend()（如居中、清边距、基础字体） - 需要传参或条件逻辑 → 必须用
mixin（如.border-radius(@r)） - 不要在一个选择器里既
:extend()又调mixin同一套样式
嵌套内部的 :extend() 容易被忽略作用域
在嵌套块里写 :extend()，它只对当前嵌套路径有效：
.modal { .header { color: red; } .content:extend(.header) { font-size: 14px; } }
这行不通 —— .header 是局部作用域，外部无法匹配，.content:extend(.header) 会静默失效。
- 想在嵌套里继承，得把基类提出来：
.header-base { color: red; }，再用.modal .header:extend(.header-base) -
&:extend(...)写在嵌套块里，表示“当前父选择器”继承，不是子元素继承 - 嵌套 +
:extend()的组合极易出错，建议先扁平化结构再考虑继承
:extend() 的输出是选择器并集，一旦基类选择器本身太具体（比如 .page-home .hero-title），继承后反而更难维护。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
