SCSS - 用于多媒体查询的扩展选择器

Question

这是SCSS专业人士使用的选择器之一。我想在媒体查询中扩展选择器。我不是“离开”范围，选择器和扩展的行在同一个媒体查询中。

但是，我使用了我想在另一个媒体查询中扩展的选择器，并且在扩展它时给了我一个错误。

我不知道如果我解释得很好，但你可以从我的代码获得它：

部分文件_tablet.scss

@media (min-width: 769px) { 

    .font-family { 
    font-family: 'Lato', Helvetica, Arial, sans-serif; 
    } 

    body { 
    @extend .font-family; 
    } 

} 

部分文件_desktop.scss

@media (min-width: 992px) { 

    .font-family { 
    font-family: 'Lato', Helvetica, Arial, sans-serif; 
    } 

    body { 
    @extend .font-family; 
    } 

} 

这给我以下错误：

你不可以@extend一个外层选择器来自@media。 您只能在相同的指令中使用@extend选择器。 来自_desktop.scss第8行的“@extend .font-family”

我知道你不能在@media范围内扩展一个外部选择器，但这不是我在这里要做的。

当我离开上述文件之一，它的作品。所以不知怎的，SASS认为我想从其他媒体查询中选择一个选择器，但我不这样做。我在这里做错了什么？如何扩展多媒体查询中使用的选择器？

Answer 1

通过扩展父（占位符）选择器尝试继承。你可以在这个link阅读更多。

%font-family { 
    font-family: 'Lato', Helvetica, Arial, sans-serif; 
    } 

    .font-family, body { 
    @extend %font-family 
    } 

Answer 2

您可以将您的身体声明媒体查询外，即使它只是扩展了事情的媒体查询中存在。

例如，这样的：

body { 
    @extend .font-family; 
} 
@media (min-width: 769px) { 
    .font-family { 
    font-family: Helvetica, Arial, sans-serif; 
    } 
} 
@media (min-width: 888px) { 
    .font-family { 
    font-family: Arial, sans-serif; 
    } 
} 

将编译此：

@media (min-width: 769px) { 
    .font-family, body { 
    font-family: Helvetica, Arial, sans-serif; 
    } 
} 
@media (min-width: 888px) { 
    .font-family, body { 
    font-family: Arial, sans-serif; 
    } 
}