如何直接扩展SCSS父选择器？

我有以下代码：

article.featured {
  h4 {
    margin-bottom: 20px
  }
  :first-child {
    height: 100%;
    padding-top: 0;
    padding-left: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    .img {
      @extend &;
    }
  }
  :last-child {
    padding-top: 0;
    padding-right: 0
  }
}

这是第13行：

@extend &;

问题是，当我尝试编译此样式表时，会出现以下错误：

Parent selectors aren't allowed here.
  ╷
10│     @extend &;
  │             ^
  ╵
  stdin 13:19 root stylesheet on line 10 at column 19

---

如何解决此错误并使用父（

&

）元素的属性扩展

.img

元素？

我发现，当我将

.img

选择器移动到

：first child

选择器旁边，并将选择器更改为

：first selector，：first selector.img

时，它会起作用

这是工作代码（注意：行

3

）：

其汇编目的是：

article.featured h4 {
  margin-bottom: 20px;
}

article.featured :first-child, article.featured :first-child .img {
  height: 100%;
  padding-top: 0;
  padding-left: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

article.featured :last-child {
  padding-top: 0;
  padding-right: 0;
}

---

我发现，当我将

.img

选择器移动到

:first child

选择器旁边，并将选择器更改为

：first selector，：first selector.img

时，它会起作用

这是工作代码（注意：行

3

）：

其汇编目的是：

article.featured h4 {
  margin-bottom: 20px;
}

article.featured :first-child, article.featured :first-child .img {
  height: 100%;
  padding-top: 0;
  padding-left: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

article.featured :last-child {
  padding-top: 0;
  padding-right: 0;
}