Sass @extend inside a media query

Question

Right now there's no error but Sass throw me a DEPRECATION WARNING because I use an @extend inside one of my media queries. I have something like this:

.root{
    color: red;
}
@media (max-width: 900px) {
    .root{
        color: blue;
    }
    .extending{
        @extend .root;
    }
}

The warning is set because I have a declaration of .root outside the media. Outside de the @media it's for the normal layout, then inside the same selector is for changing the layout of the page. But the goal here is to have .extending to have its color set to blue only if max-width is 900px, otherwise I don't want anything set to it.

So the question is how to use @extend inside my media query without sass throwing me an error?

Answer 1

You may try a @mixin rule instead of @extend.

Do you really have an idea how the generated CSS will look like? @extend is an aggregator for selectors, this may end up in very confusing CSS code.

My suggestion with @extend rules: Avoid @extending regular rules, use %placeholder rules instead.