@extend with pseudo-class has unexpected priority

Consider the following scss

.foo:hover{
    color:red;
}

.foo.bar.baz{
    color:blue;
}

p.extended{
    @extend .foo;
    @extend .bar;
    @extend .baz;
}

I would like p.extended elements to always have the blue color with no red :hover state, since I am extending .foo .bar and .baz which have a higher priority than just .foo:hover

However in the resulting css

.foo:hover, p.extended:hover {
  color: red;
}

.foo.bar.baz, p.extended {
  color: blue;
}

This means that p.extended elements will still have the red :hover state, but elements with class="foo bar baz" will not.

I’m not sure if there is a way of fixing without getting really hacky this but suggestions welcome.

[davidkpiano]

The @extend directive is working as expected here. Here’s the breakdown:

• @extend .foo;
  • when extending selector has a pseudoclass of :hover, set color: blue (from .foo:hover)
  • when extending selector has a class of .bar and .baz, set color: red
• @extend .bar;
  • when extending selector has a class of .foo or matches p.extended (since that extended .foo), and has a class of .baz, set color: blue
• @extend .baz
  • when extending selector has a class of .foo or matches p.extended, and has a class of .bar or matches p.extended (since that extended .bar), set color: blue
• remove redundant p.extended.foo.bar, p.extended.foo.baz, p.extended.bar.baz selectors since p.extended extends .foo, .bar, .baz

You’re doing some complicated extending here. Try extending only %placeholder selectors:

%foo-hover {
  color: blue;
}

%foo-bar-baz {
  color: red;
}

.foo:hover {
  @extend %foo-hover;
}

.foo.bar.baz {
  @extend %foo-bar-baz;
}

p.extended {
  @extend %foo-bar-baz;
}

Or something similar. I do not know what you’re intending to do, or how you’re using this in real life, but hopefully the above example will help guide you.

[mikemonteith]

Thanks David. My ‘real life’ example was trying to extend selectors from a third-party CSS that I’m using as if it was SCSS. I don’t want to have to change it by adding %placeholder selectors. I have another work-around that I can use.