Less使用:extend能否从其他文件继承指定类及其子样式？

这个需求完全可以实现，需要先导入文件1，同时调整你的extend写法，具体调整如下：

错误点排查 #

• 未提前导入文件1：Less编译时无法识别跨文件的类名，必须先导入目标文件才能继承对应样式
• 目标类名匹配错误：你在文件1中定义的类最终编译为.first-identical，不存在全局的.identical类，无法匹配到继承目标
• extend绑定对象错误：你需要复用样式的是.second-identical子元素，而非父级.second本身
• 语法错误：:extend的目标类不需要加引号包裹

正确实现方式 #

第一步：导入文件1 #

在文件2的开头导入文件1，推荐加(reference)参数，只会导入你需要继承的样式，不会把文件1的全量样式编译到文件2的最终CSS中，避免冗余：

@import (reference) './你的文件1路径.less';

第二步：修正extend写法 #

给需要复用样式的.second-identical类绑定继承逻辑：

.second {
  &-identical:extend(.first-identical all) {}
}

上述代码编译后，.second-identical会完全继承.first-identical的所有样式，包括其嵌套的子级、伪类等所有定义的规则。

更推荐的维护方案 #

如果后续还有其他页面需要复用这段相同样式，建议把公共样式抽成独立的common.less文件，两个页面的Less都直接引入该公共文件，后续修改只需要改一次公共代码，维护成本更低。

内容的提问来源于stack exchange，提问作者MAS89