Weird @extend side effects

I have this project that's using Bootstrap. Instead of importing the CSS and expanding the styles with my own, I'm importing the Sass styles and compiling to a single CSS file. It was upon doing so that I noticed something strange.

Bootstrap defines a button class like so (code snipped for brevity, because my focus is on the selectors):

.btn { // styles } 

Some of my own styles were using the Sass directive @extend for a form input button:

.search-form .search-submit { @extend .btn; @extend .btn-secondary; } 

Elsewhere, I had some link-specific styles that I wanted to make sure didn't get applied to the .btn class:

a:not(.btn) { // styles } 

Once I compiled to CSS, however, I wasn't seeing those link-specific styles being applied. Instead, this is what was output to my stylesheet:

a:not(.btn):not(.search-form .search-submit) { /* styles */ } 

This was due to my use of @extend in on the submit button. So I copied Bootstrap's button class definitions into a mixin in my own stylesheet, and changed the input button's styles to this:

.search-form .search-submit { @include button; @include button-variant($secondary, $secondary); } 

Once I made that change, the output to my stylesheet was as I expected:

a:not(.btn) { /* styles */ } 

Note: the button mixin is mine. The button-variant mixin already exists within Bootstrap's code.

This was originally published on eichefam.net.