媒体查询用法
最后更新于：2022-04-01 10:47:33
就在不久之前，有一个关于应该在哪里书写媒体查询的热门讨论：媒体查询是应该与选择器写在一起（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)