Css Sass编译错误：Can'；t扩展&；：之前：

在我的SCSS文件中，我正在做

    .number {
        @include font-size(60);
        position: relative;
        margin: -1.5rem 2rem 0;
        background: darken($pc, 10);
        width: 80px;
        height: 95px;
        color: #fff;
        align-items: center;
        display: inline-flex;
        justify-content: center;
        &:before {
            content: "";
            position: absolute;
            top: 0;
            left: -15px;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 0 15px 15px;
            border-color: transparent transparent darken($pc, 20) transparent;
        }
        &:after {
            @extend &:before;
            left: auto;
            right: -15px;
            border-width: 0 15px 15px 0;
        }
    }

---

特别是说

@extend&:before

出于某种原因破坏了我的SASS编译，知道是什么原因造成的吗？我正在将gulp sass与NPM一起使用。

您不能扩展父选择器，只需删除符号

&

.number {
        position: relative;
        margin: -1.5rem 2rem 0;
        width: 80px;
        height: 95px;
        color: #fff;
        align-items: center;
        display: inline-flex;
        justify-content: center;
        &:before {
            content: "";
            position: absolute;
            top: 0;
            left: -15px;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 0 15px 15px;
        }
        &:after {
            @extend :before;
            left: auto;
            right: -15px;
            border-width: 0 15px 15px 0;
        }

}

将编译为：

.number {
  position: relative;
  margin: -1.5rem 2rem 0;
  width: 80px;
  height: 95px;
  color: #fff;
  align-items: center;
  display: inline-flex;
  justify-content: center;
}
.number:before, .number:after {
  content: "";
  position: absolute;
  top: 0;
  left: -15px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 15px 15px;
}
.number:after {
  left: auto;
  right: -15px;
  border-width: 0 15px 15px 0;
}

---

您不能扩展父选择器，只需删除符号和

&

.number {
        position: relative;
        margin: -1.5rem 2rem 0;
        width: 80px;
        height: 95px;
        color: #fff;
        align-items: center;
        display: inline-flex;
        justify-content: center;
        &:before {
            content: "";
            position: absolute;
            top: 0;
            left: -15px;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 0 15px 15px;
        }
        &:after {
            @extend :before;
            left: auto;
            right: -15px;
            border-width: 0 15px 15px 0;
        }

}

将编译为：

.number {
  position: relative;
  margin: -1.5rem 2rem 0;
  width: 80px;
  height: 95px;
  color: #fff;
  align-items: center;
  display: inline-flex;
  justify-content: center;
}
.number:before, .number:after {
  content: "";
  position: absolute;
  top: 0;
  left: -15px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 15px 15px;
}
.number:after {
  left: auto;
  right: -15px;
  border-width: 0 15px 15px 0;
}