Less中extend常不生效，因其仅匹配已编译存在的选择器，不跨文件、不穿透嵌套、不处理变量或mixin生成的选择器；需确保目标选择器在当前@import链中可见且未被隔离。
Less中extend为什么经常不生效？
因为extend只匹配**已编译存在的选择器**，不会跨文件、不会穿透嵌套作用域，更不处理变量或混合逻辑。你在a.less里定义了.btn { color: red; }，在b.less里写.primary-btn:extend(.btn) {}，如果a.less没被@import进来，或者.btn被包裹在&.disabled之类嵌套块里，extend就直接静默失败。
实操建议：
- 确保
extend目标选择器在当前作用域“可见”——通常意味着它必须出现在前面的@import链中，且未被private修饰或包裹在media查询等隔离块内 - 避免对带参数的
mixin调用结果使用extend，比如.make-btn(@size)生成的选择器无法被:extend()识别 - 调试时加
--strict-math=on --strict-units=on编译，能提前暴露部分不可继承的语法错误
mixin传参和extend选哪个？看复用粒度
如果你只是想让多个类共享一套声明（比如都带display: flex; align-items: center;），extend语义更干净、输出CSS更紧凑；但一旦涉及动态值（颜色、间距、断点）、条件分支或需要计算，mixin是唯一选择。
常见错误现象：把本该用mixin的地方硬套extend，比如试图用.icon-small:extend(.icon) {}和.icon-large:extend(.icon) {}来控制尺寸——结果发现.icon本身没有固定宽高，两个子类样式完全一样，毫无区分度。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 静态、无变量、纯结构复用 → 优先
extend - 需接收
@size、@color、@responsive等参数 → 必须用mixin - 想复用又带默认值？写成
.flex-center(@dir: row) { display: flex; flex-direction: @dir; }，比一堆extend更可控
跨模块引用时@import顺序和reference标志怎么配？
Less默认把每个@import当作独立作用域，直接@import "mixins.less"后就能调用里面定义的mixin；但extend目标必须“真实存在”，所以导入顺序不能错。更关键的是：reference标志能让一个文件只提供mixin/extend定义，不输出CSS——这对基础样式库（如reset.less、utils.less）至关重要。
实操建议：
- 基础工具文件（含
.clearfix、.sr-only等）用@import (reference) "utils.less";，避免重复输出 - 业务组件文件按依赖顺序导入，例如
base.less→form.less→dialog.less，否则dialog里:extend(.form-control)会找不到 - 别在
reference文件里写非mixin/extend的顶层样式，它们会被忽略——这是最容易漏掉的坑
编译后CSS体积和维护性怎么平衡？
extend会合并选择器（.a, .b { ... }），节省字节数；mixin则每调用一次就复制一份声明，容易膨胀。但过度依赖extend会让样式逻辑分散：一个.card可能被十几处:extend()，改它就得全局查引用；而mixin调用位置明确，改参数就能批量更新。
实操建议：
- 高频、稳定、极少改动的基础样式（重置、工具类）用
extend+reference - 业务组件内部复用（按钮变体、表单状态）用带命名空间的
mixin，比如.btn-variant(@bg, @text)，避免污染全局 - 用
lessc --clean-css压缩时，extend的优势会被削弱，此时可读性和可维护性比几行重复代码更重要
真正难的不是语法，是判断哪部分该“固化”、哪部分该“可变”。同一个.tag类，在列表页要圆角+小字号，在详情页要带阴影+大字号——这时候硬extend只会让你在两个地方反复覆盖，不如一开始就用mixin驱动。
