就在不久之前，有一個關于應該在哪里書寫媒體查詢的熱門討論：媒體查詢是應該與選擇器寫在一起（Sass 允許這種方式），還是要徹底地分離開？我想說我是**媒體查詢緊貼選擇器**方式的狂熱捍衛者，并且認為這會和**組件**一樣表現得很棒。 ~~~ .foo { color: red; @include respond-to('medium') { color: blue; } } ~~~ 生成結果： ~~~ .foo { color: red; } @media (min-width: 800px) { .foo { color: blue; } } ~~~ 可能你已經了解到，這種習慣會導致 CSS 輸出文件中出現重復的媒體查詢語句。不過[測試了](http://sasscast.tumblr.com/post/38673939456/sass-and-media-queries)和下面的話認為一旦 Gzip（或者其他相同軟件）完成壓縮就不會有什么問題： > ……我們反復測試了貼合與分離兩種媒體查詢方式對性能的影響，結論是即使在最差情況下也沒有明顯差異，而在最好情況下差異更是少之又少。 > —?[Sam Richards](https://twitter.com/snugug), 關于[Breakpoint](http://breakpoint-sass.com/)的看法 如果現在你仍擔心媒體查詢的副本問題，你可以使用工具來合并它們，比如[這個 gem](https://github.com/aaronjensen/sass-media_query_combiner)，但是我有必要警告你移動相關 CSS 代碼可能會有副作用。 是否了解資源順序是非常重要的。 ## 擴展閱讀 * [Sass and Media Queries](http://sasscast.tumblr.com/post/38673939456/sass-and-media-queries) * [Inline or Combined Media queries? Fight!](http://benfrain.com/inline-or-combined-media-queries-in-sass-fight/) * [Sass::MediaQueryCombiner](https://github.com/aaronjensen/sass-media_query_combiner) 如果你喜歡 Sass Guidelines，請支持它 [?支持 Sass Guidelines](https://gum.co/sass-guidelines)