就在不久之前，有一個關(guān)于應(yīng)該在哪里書寫媒體查詢的熱門討論：媒體查詢是應(yīng)該與選擇器寫在一起（Sass 允許這種方式），還是要徹底地分離開？我想說我是媒體查詢緊貼選擇器方式的狂熱捍衛(wèi)者，并且認(rèn)為這會和組件一樣表現(xiàn)得很棒。

.foo {
  color: red;

  @include respond-to('medium') {
    color: blue;
  }
}

生成結(jié)果：

.foo {
  color: red;
}

@media (min-width: 800px) {
  .foo {
    color: blue;
  }
}

可能你已經(jīng)了解到，這種習(xí)慣會導(dǎo)致 CSS 輸出文件中出現(xiàn)重復(fù)的媒體查詢語句。不過測試了和下面的話認(rèn)為一旦 Gzip（或者其他相同軟件）完成壓縮就不會有什么問題：

……我們反復(fù)測試了貼合與分離兩種媒體查詢方式對性能的影響，結(jié)論是即使在最差情況下也沒有明顯差異，而在最好情況下差異更是少之又少。
—?Sam Richards, 關(guān)于Breakpoint的看法

如果現(xiàn)在你仍擔(dān)心媒體查詢的副本問題，你可以使用工具來合并它們，比如這個 gem，但是我有必要警告你移動相關(guān) CSS 代碼可能會有副作用。 是否了解資源順序是非常重要的。

擴展閱讀

• Sass and Media Queries
• Inline or Combined Media queries? Fight!
• Sass::MediaQueryCombiner

如果你喜歡 Sass Guidelines，請支持它

?支持 Sass Guidelines