在媒体查询中使用Sass @extend

Question

现在没有错误，但是Sass向我抛出了DEPRECATION WARNING，因为我在一个媒体查询中使用了@extend。我有这样的事情：

.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

您可以尝试使用@mixin规则而不是@extend。

您是否真的知道生成的CSS的外观？@extend是选择器的聚合器，这可能会导致非常混乱的CSS代码。

我对@extend规则的建议：避免@extending常规规则，请改用％placeholder规则。