Sass extend with pseudo selectors

Question

I use a 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 that 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 mixin? Workarounds? Thank you for reading.

Answer 1

If you want to extend a pseudo-class or pseudo-element, you just want to expand the parent selector (i.e. everything that happens before the colon).

 %foo:before { color: red; } .bar { @extend %foo; } 

Forms:

 .bar:before { color: red; } 

So, for your instance, you want to do the following:

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

Keep in mind that your mixin generates many styles, so it is not suitable for intensive reuse. It would make much more sense to expand this.

Answer 2

It seems that SASS does not work so well with pseudo-elements in extends.

Work around the problem as follows:

 %before-icon color: red .foo /* Some styles here */ &:before @extend %before-icon 

Result:

 .foo:before { color: red; } .foo { /* Some styles here */ } 

It also seems like you are too complicated. You will find that your code is hard to understand and maintain.

PS You must save mixins in _mixins.scss .

Answer 3

As already mentioned, you should try to use a placeholder class. In the other hand, always look at @mixin first and try to avoid nesting with @extend.