Sass compilation error: Can't extend &:before:

Question

In my SCSS file i'm doing

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

Specifically the line that says @extend &:before; is breaking my SASS compilation for some reason, any idea what's causing this? I'm using gulp-sass with NPM.

Answer 1

You can't extend a parent selector, just remove the ampersand &.

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

}

Will compile to this:

.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