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/
      ...
            _font         


        

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.