function - Sass使用伪选择器扩展

Question

我正在使用罗盘来管理Mac OS X上的一些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-ab-logo：解决方法？
谢谢阅读。

Answer 1

当您想扩展伪类或伪元素时，您只想扩展父选择器（即，冒号之前的所有内容）。

%foo:before {
  color: red;
}

.bar {
  @extend %foo;
}

产生：

.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会生成很多样式，因此它实际上不适合大量重复使用。扩展它也将更加有意义。