less中:extend()是编译期静态匹配机制，只对已声明的选择器生效，语法为选择器:extend(目标 all)，用于合并选择器以减少css体积，不支持变量、mixin或动态继承。
Less中:extend()的基本写法和生效条件
:extend()不是CSS原生特性，是Less编译期的静态匹配机制，只对已定义的选择器起作用，不能继承变量、Mixin或未声明的类名。它本质是“把目标选择器的样式规则，复制一份给当前选择器”，而非运行时继承。
- 必须写在选择器末尾，后跟空格和
:extend()，例如.btn-primary:extend(.btn all) -
all关键字决定是否匹配嵌套选择器（如.container .btn），不加all只匹配顶层精确选择器 - 被继承的选择器必须在当前文件或已
@import的文件中先声明，否则编译报错：Undeclared extend "<selector>"</selector>
为什么:extend()不生效？常见失效场景
最常踩的坑是误以为它像CSS自定义属性或JS继承一样“动态可复用”，其实它非常脆弱：
- 使用了伪类或属性选择器但没加
all：比如.link:hover想被.nav-link:extend(.link)继承，必须写成.nav-link:extend(.link:hover)或.nav-link:extend(.link all) - 目标选择器带媒体查询：默认不跨媒体块继承，需显式写成
.mobile-btn:extend(.btn all)并在同一@media块内，或把基础类提至全局作用域 - 类名拼写/空格不一致：Less严格匹配字符串，
.btn--large和.btn--large（末尾空格）会被视为不同选择器 - 在Mixin中直接写
:extend()：Mixin内部的:extend()不会向外暴露，只能在调用处写，例如.btn-success { .button-styles(); &:extend(.btn all); }
:extend()与@mixin的关键区别在哪
二者都为减少重复，但机制完全不同，选错会导致维护困难：
-
@mixin是“复制样式声明”，每次调用生成独立副本，支持参数、逻辑判断，适合需要微调的场景（如.btn(@bg: #007bff)） -
:extend()是“合并选择器”，编译后多个类共享同一份CSS规则，体积更小，但无法传参，也不支持条件分支 - 混用风险：如果同时用
@mixin生成样式 +:extend()继承，可能因顺序问题导致样式覆盖不可控，例如.btn用Mixin定义，.btn-primary又:extend(.btn)，此时.btn必须是纯选择器声明，不能是Mixin调用结果
实际项目中安全使用:extend()的建议
它适合抽象视觉上完全一致、语义也相近的基础模块，比如表单控件的状态类或图标基类：
- 优先用于无状态的基础类：如
.text-center、.sr-only、.visually-hidden，这些几乎不随上下文变化 - 避免用于BEM中的修饰符（
.btn--outline）或子元素（.card__title），容易因选择器权重或嵌套深度出问题 - 编译后检查CSS输出：确认是否真合并了选择器（如
.btn, .btn-primary出现在同一行规则中），而不是生成了两套重复样式 - 团队协作时，在文档里明确标注哪些类是专为
:extend()设计的，避免其他人误改其结构或添加动态属性
Less的:extend()是个“省体积”工具，不是“解耦”工具；一旦样式开始分化，就该切到Mixin或CSS自定义属性——毕竟编译期的静态合并，扛不住运行时的灵活需求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
