Less继承失效求助：子类未成功继承父类样式

嘿，我来帮你搞定这个Less继承的小问题！

你遇到的核心问题是：Less的extend默认只会继承目标选择器本身的规则，不会自动继承它的嵌套/伪类派生规则。你的.parent-item没有直接的样式声明，所有样式都写在&:not(:last-child)这个嵌套伪类里，单纯的&:extend(.parent-item)找不到可继承的有效规则，所以子类就没拿到样式。

给你两个靠谱的解决方案：

方案1：使用all关键字继承所有派生规则 #

只需要给extend加上all关键字，就能让子类继承父类所有相关的选择器（包括嵌套的伪类、伪元素等）：

.parent-item { 
  &:not(:last-child) { 
    margin-right: 20px; 
  } 
} 

.child-item { 
  &:extend(.parent-item all); 
  // 你的其他子类样式
}

编译后的CSS会变成：

.parent-item:not(:last-child),
.child-item:not(:last-child) {
  margin-right: 20px;
}

这样.child-item:not(:last-child)就会拥有margin-right:20px的样式了。

方案2：用混合宏（Mixin）复用样式 #

如果你的样式复用场景比较多，用Mixin会更灵活，也更直观：

// 定义一个可复用的混合宏
.item-spacing() {
  &:not(:last-child) {
    margin-right: 20px;
  }
}

// 父类引用混合宏
.parent-item {
  .item-spacing();
}

// 子类引用混合宏
.child-item {
  .item-spacing();
  // 你的其他子类样式
}

这种方式编译后的CSS和方案1效果一致，但代码结构更清晰，后续修改样式也只需要改混合宏即可。

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