Sass extend and parent selector

Question

I have the following Sass placeholder and I want to extend it.

%btn
  // ...button styling...
  &[disabled], &.btn--disabled
    color: red

.btn-primary
  @extend %btn

The CSS output is the following:

 [disabled].btn-primary, .btn--disabled.btn-primary{ color: red; }

When I'd like to get the following:

 .btn-primary[disabled], .btn-primary.btn--disabled { color: red; }

I don't get why the output order is not the same as the specified one. How can I change that?

Answer 1

I think what you're after is the following:

%btn[disabled], %btn.btn--disabled
    color: red

.btn-primary
    @extend %btn

To help conceptualize what the structure will be for the CSS that's generated, just remember that %placeholder is a token that's going to be substituted with the selector that's @extending it.

Edit

Actually, this still outputs

[disabled].btn-primary, .btn--disabled.btn-primary {
    color: red; }

which I wouldn't expect... Syntactically, [disabled].btn-primary is the same as .btn-primary[disabled], but it's annoying that the source ordering isn't being respected.

Here's a bug report I found that describes this behaviour (apparently, it's just how @extend works):

• placeholder-selectors decide on the actual selector's order, not the actual selectors