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; 
    } 
}