Sass extend with pseudo selectors

Question

I am using compass to manage some sass files on mac osx. I have these files:

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

In fonts I have this rule which I would like to reuse @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";
}

In functions I have this 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" );
   }
 }

Finally in functions.scss I call this:

    @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.
    }

Is there a way to reference .icon-ab-logo:before using a mixin? Workarounds? Thanks for reading.

Answer 1

When you want to extend a pseudo class or pseudo element, you just want to extend the parent selector (ie. everything that comes before the colon).

%foo:before {
  color: red;
}

.bar {
  @extend %foo;
}

Generates:

.bar:before {
  color: red;
}

So for your instance, what you want to do is this:

.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');
}

Be aware that your mixin generates a lot of styles, so it's not really suitable for extensive reuse. It would make a lot more sense to be extending that as well.

Answer 2

Seems like SASS doesn't work so well with pseudo elements in extends.

Work around the issue like this:

%before-icon
  color: red

.foo
  /* Some styles here */

  &:before
    @extend %before-icon

Result:

.foo:before {
  color: red;
}

.foo {
  /* Some styles here */
}

Also, it looks like you're overcomplicating things. You'll find your code difficult to grasp and maintain.

PS You should keep mixins in _mixins.scss.

Answer 3

As said before, you should try to use placeholder class. In other hand always first consider @mixin first and try to avoid nesting with @extend.