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

Sass编译错误：无法扩展＆amp;：之前：

1 个答案: