css - Sass编译错误: Can't extend &:before:

Question

在我正在做的 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 编译，知道是什么原因造成的吗？我在 NPM 中使用 gulp-sass。

Answer 1

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

.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;
}

SassMeister