Function Sass使用伪选择器进行扩展

我正在使用compass管理MacOSX上的一些sass文件。我有以下文件：

sass/
      screen.scss
            partials folder/
      ...
            _fonts.scss
            _functions.scss
      ...

在字体中，我有一个规则，我想重用@extend

//fonts.scss
.icon-ab-logo, {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.icon-ab-logo:before { //i want to reuse this.
content: "\e000";
}

在函数中，我有以下screen.scss：

.logo {
position: absolute;
top: 0;
bottom: 0px;
z-index: 500;
width: 9.5em;
background: $logo;
@include transition(all 0.2s);
   &:after{
     @include icon( ".icon-ab-logo" );
   }
 }

最后，在functions.scss中，我称之为：

    @mixin icon( $icon ){
      font-family: 'icomoon';
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      @extend #{$icon}:before; //<- this is the problem, no errors just isn't parsed.
    }

@mixin图标（$icon）{
字体系列：“icomoon”；
说：没有；
字体风格：普通；
字体大小：正常；
字体变体：正常；
文本转换：无；
线高：1；
-webkit字体平滑：抗锯齿；
@extend#{$icon}:before；//似乎SASS不能很好地处理extends中的伪元素

像这样解决这个问题：

%before-icon
  color: red

.foo
  /* Some styles here */

  &:before
    @extend %before-icon

结果:

.foo:before {
  color: red;
}

.foo {
  /* Some styles here */
}

而且，看起来你把事情复杂化了，你会发现你的代码很难掌握和维护

PS您应该将mixin保存在
\u mixins.scss
中当您想要扩展伪类或伪元素时，您只需要扩展父选择器（即冒号之前的所有内容）

生成：

.bar:before {
  color: red;
}

因此，对于您的实例，您要做的是：

.icon-ab-logo, {
    font: 100%/1 'icomoon'; // use the shorthand
    speak: none;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
}

%foo:before, .icon-ab-logo:before { //i want to reuse this.
    content: "\e000";
}

@mixin icon( $icon ){
    font: 100%/1 'icomoon'; // use the shorthand
    speak: none;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    @extend #{$icon};
}

.bar {
    @include icon('%foo');
}

意识到你的MIXIN产生了很多样式，所以它不太适合广泛的重用。扩展它也会更有意义。
 
正如前面所说的，你应该尝试使用占位符类。另一方面，总是首先考虑@ MIXIN，并尽量避免用@扩展嵌套。< /P>这是有效的。正如您所说，这不是一个好主意。感谢您花时间回答我的问题。公认答案的核心原则是使用扩展。但是，使用扩展有一些缺点。您可能也希望避免使用扩展。最大的缺点是使用扩展可能会变得非常混乱，并且不尊重源代码呃,这里解释说,。
.icon-ab-logo, {
    font: 100%/1 'icomoon'; // use the shorthand
    speak: none;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
}

%foo:before, .icon-ab-logo:before { //i want to reuse this.
    content: "\e000";
}

@mixin icon( $icon ){
    font: 100%/1 'icomoon'; // use the shorthand
    speak: none;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    @extend #{$icon};
}

.bar {
    @include icon('%foo');
}