@extend in media query compiles outside of media query

[Veraxus]

If I @extend a class within a media query, the CSS compiles outside the media query and aggregated with the global scope class. This is... weird... and it makes using @extend on classes pretty much worthless on mobile-first projects.

SCSS

.example {
    padding-left: 2rem;
    padding-right: 2rem;
}
@media screen and (min-width:768px) {

    #footer {
        .row {
            @extend .example;
        }
    }

}

EXPECTED CSS

.example {
    padding-left: 2rem;
    padding-right: 2rem;
}
@media screen and (min-width:768px) {

    #footer .row {
        padding-left: 2rem;
        padding-right: 2rem;
    }

}

ACTUAL CSS

.example, #footer .row {
    padding-left: 2rem;
    padding-right: 2rem;
}

[xzyfer]

Thanks for reporting this.

Could you please add a spec in https://github.com/sass/sass-spec ?

Here's an example of a good spec PR for reference https://github.com/sass/sass-spec/pull/89/files

[Panya]

Well, as I know in Ruby Sass you cannot use @extend inside @media that way (extending a selector that outside the @media's block). You'll get an error.

[Veraxus]

It turns out that this behavior has been (controversially) deprecated and removed as of SASS 3.3. Please disregard this issue. Different approaches are recommended instead.

For more information, see: sass/sass#456

[montoya-azul]

What is a better approach?