Sass 使用&；在：之后的父元素上切换图标；当班级不同时

我试图以父框元素为目标，在：after伪元素中更改图标。当我将符号和放在类后面时，它会跳出到：.box示例默认值#pageContainer.box.box标题这不是您应该如何使用它的吗？有什么建议吗

<div id="pageContainer">
    <div class="box box-example box-example-default">
        <div class="header">
            <h1>Title<h1>
        </div>
    </div>

    <div class="box box-example box-example-simple">
        <div class="header">
           <h1><h1>
        </div>
    </div>
 </div>
.box {
    .header{
        &:after{
         position: absolute;
         right:0;
         bottom:-63%;
          content: '\f0ce';
         display:block;
         font-family: "FontAwesome";

         .box-example-simple &{
              content: '\f0ce';
           }
        }
    }

标题
.盒子{
.标题{
&：之后{
位置：绝对位置；
右：0；
底部：-63%；
内容：'\f0ce'；
显示：块；
字体系列：“FontAwesome”；
.box示例很简单&{
内容：'\f0ce'；
}
}
}

末尾的符号将不适用于您，因为您需要在同一级别上使用

.box

和

.box示例simple

。请参见此

您可以使用根目录下的

@和
{&}
来实现这一点，如下所示：

.box {
    .header{
        &:after{
         position: absolute;
         right:0;
         bottom:-63%;
         content: '\f0ce';
         display:block;
         font-family: "FontAwesome";

        @at-root .box-example-simple#{&} {
              content: '\f0ce';
           }
        }
    }
}

但是，只需将其写出来可能会更干净：

.box {
  .header {
    &:after {
      position: absolute;
      right:0;
      bottom:-63%;
      content: '\f0ce';
      display:block;
      font-family: "FontAwesome";
    }
  }

  &.box-example-simple {
    .header {
      &:after {
        content: '\f0ce';
      }
    }
  }
}

感谢您的回复，第一个示例没有达到它仍然创建输出的目的：.box-example-default#pageContainer.box.box-header:after。我确实同意第二个示例更干净（这是我一直在使用的）。奇怪的是，如果您看到它确实编译到
.box-example-simple.box.header:after
。
{$}
语法仅在Sass 3.4中有效。不管怎样，很高兴您能使用它！