Question

（这可能已经回答了 - 虽然找不到答案）

传统的@media查询覆盖倾向于将同一括号组下的一个大小/介质的所有覆盖分组。

e.g。

.profile-pic {
    width:600px;
}
.biography {
    font-size: 2em;
}

@media screen and (max-width: 320px) {
    .profile-pic {
        width: 100px;
        float: none;
    }
    .biography {
        font-size: 1.5em;
    }
}

在Sass中，有一种非常好的方法可以在嵌套声明中编写@media查询覆盖，如下所示：

.profile-pic {
width:600px;
  @media screen and (max-width: 320px) {
    width: 100px;
    float: none;
  }
}

.biography {
    font-size: 2em;
  @media screen and (max-width: 320px) {
    font-size: 1.5em;
  }
}

现在，在编译时，sass不会将@media查询块组合在一起，因此输出最终会是这样的：

.profile-pic {
    width:600px;
}
@media screen and (max-width: 320px) {
  .profile-pic {
    width: 100px;
    float: none;
  }
}

.biography {
    font-size: 2em;
}
@media screen and (max-width: 320px) {
  .biography {
    font-size: 1.5em;
  }
}

我已经将这个技术用于最近的项目，当你将这个原则应用到一个更大的项目时，你最终会在你的css中传播多个@media查询部分（到目前为止我已经有大约20个）。

我非常喜欢sass技术，因为它可以更容易地跟随覆盖的流程（并且还可以更容易地移动物体）。

但是，我想知道在通过CSS获得多个@media部分是否有任何不利之处，特别是性能明智？

我已经尝试过chrome css profiler，但我看不到@media查询的任何特定内容。

（More info on @media in sass on this page）