就在不久之前，有一个关于应该在哪里书写媒体查询的热门讨论：媒体查询是应该与选择器写在一起（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)