Sass 编译错误：无法扩展 &:before：答案

【问题标题】：Sass compilation error: Can't extend &:before:Sass 编译错误：无法扩展 &:before：
【发布时间】：2016-10-19 14:12:00
【问题描述】：

在我的 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。

【问题讨论】：

标签： css sass gulp-sass

【解决方案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

【讨论】：