媒体查询用法

就在不久之前，有一个关于应该在哪里书写媒体查询的热门讨论：媒体查询是应该与选择器写在一起（Sass 允许这种方式），还是要彻底地分离开？我想说我是媒体查询紧贴选择器方式的狂热捍卫者，并且认为这会和组件一样表现得很棒。

.foo {
  color: red;

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

生成结果：

.foo {
  color: red;
}

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

可能你已经了解到，这种习惯会导致 CSS 输出文件中出现重复的媒体查询语句。不过测试了和下面的话认为一旦 Gzip（或者其他相同软件）完成压缩就不会有什么问题：

……我们反复测试了贴合与分离两种媒体查询方式对性能的影响，结论是即使在最差情况下也没有明显差异，而在最好情况下差异更是少之又少。
— Sam Richards, 关于Breakpoint的看法

如果现在你仍担心媒体查询的副本问题，你可以使用工具来合并它们，比如这个 gem，但是我有必要警告你移动相关 CSS 代码可能会有副作用。 是否了解资源顺序是非常重要的。

扩展阅读

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

如果你喜欢 Sass Guidelines，请支持它

 支持 Sass Guidelines