Sass中如何在无类名情况下使用@extend？

答案是可以实现，但你当前的写法存在逻辑问题，导致@extend未生效。

问题原因 #

在嵌套的SCSS结构中，&代表的是当前层级的完整选择器路径。你内层的div里，&指向的是div:last-child div，所以@extend &:last-child实际是在尝试扩展div:last-child div:last-child，而非你期望的外层div:last-child，这就导致样式没有作用到目标元素上。

解决方案 #

这里提供两种可行的实现方式：

1. 使用占位符选择器（%placeholder）

把需要复用的样式抽成占位符，在外层和内层分别引用：

%last-child-styles {
  margin: 1rem;
}

div {
  &:last-child {
    @extend %last-child-styles;
    div {
      @extend %last-child-styles;
    }
  }
}

编译后的CSS：

div:last-child, div:last-child div {
  margin: 1rem;
}

2. 用变量保存父选择器

在外层把目标选择器存为变量，内层直接扩展这个变量：

div {
  &:last-child {
    $target-selector: &; // 保存当前选择器：div:last-child
    margin: 1rem;
    div {
      @extend #{$target-selector};
    }
  }
}

编译结果和第一种方法完全一致。

这两种方法都能实现你想要的“让内层div扩展外层div:last-child的样式”的需求，且不需要给父选择器添加类名。

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