Sass extend and parent selector

Question

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

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

The CSS output is as follows:

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

When I want to get the following:

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

I do not understand why the output order does not match the specified one. How to change this?

Answer 1

I think you need the following:

 %btn[disabled], %btn.btn--disabled color: red .btn-primary @extend %btn 

To help conceptualize the structure structure of the generated CSS, just remember that %placeholder is the token that will be replaced by the selector that @extend uses.

Edit

In fact, it still outputs

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

which I would not expect ... Syntactically, [disabled].btn-primary same as .btn-primary[disabled] , but it is annoying that source ordering is not respected.

Here is the error report I found that describes this behavior (apparently it just works @extend ):

• placeholders select the actual order of selection, not the actual selector