Sass @extend 在媒体查询中

Question

这个问题在这里已经有了答案:





Extending selectors from within media queries with Sass

(6 个回答)


8年前关闭。




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

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

设置警告是因为我有 .root 的声明在媒体之外。在@media 之外，它用于正常布局，然后在同一个选择器内用于更改页面的布局。
但这里的目标是拥有 .extending只有在 max-width 时才将其颜色设置为蓝色是 900px ，否则我不想设置任何东西。

所以问题是如何在我的媒体查询中使用 @extend 而不会 sass 抛出错误？

Answer 1

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

你真的知道生成的 CSS 会是什么样子吗？ @extend 是选择器的聚合器，这可能会导致非常困惑的 CSS 代码。

我对 @extend 规则的建议:避免使用 @extending 常规规则，而是使用 %placeholder 规则。