用于媒体查询的 SASS 占位符？

Question

我发现这种方法可以使用 mixin 轻松添加 @media 块：

@mixin phone() {
    @media only screen and (max-width: 480px) {
        @content;
    }
}

要使用它，只需输入如下内容：

p {
    @include phone { ... }
    span {
        @include phone { ... }
    }
}

但问题在于真正的 CSS 输出：

@media only screen and (max-width: 480px) {
  p { ... }
}
@media only screen and (max-width: 480px) {
  p span { ... }
}

它复制 @media ... 部分，这会使 CSS 膨胀。

有没有办法让 mixin 像占位符一样工作？所以它将合并所有@content 并将其放在同一个@media ... 块下。

所以结果会是这样的

@media only screen and (max-width: 480px) {
    p { ... }
    p span { ... }
}

我知道我可以将@include phone 放在文件末尾并在该块中写入所有必要的样式。

但是在原始样式之外编写媒体查询样式会更容易阅读和组织。

谢谢

Answer 1

Sass 目前没有该功能。您唯一的选择是在单个媒体查询中手动对样式进行分组（或使用具有该功能的第 3 方 CSS 压缩器）。

https://github.com/nex3/sass/issues/116

Answer 2

您只需要调整嵌套即可。因为 mixin 会将您的所有内容放入媒体查询中，所以您只想使用一次 mixin 并将所有相关样式放入其中（以避免多个媒体查询）。

@include phone {
  p {
    span { ... }
  }
}

如果您尝试为各种媒体查询组合

和 的样式，则不可避免地会在预处理或输出代码中出现一些样式分离。

例如：

p {
  ...
  span { ... }
  @include phone {
    ...
    span { ... }
  }
}

希望对您有所帮助。即使您最终得到的输出感觉“效率较低”，它实际上也不应该减慢浏览器的渲染速度，所以我会说优先编写感觉可维护的代码以进行开发。

Answer 3

SASS 不能将扩展与媒体查询结合使用**，因此当您采用这种代码风格时，目前不可避免地会出现重复的媒体查询。

您可以在顶层使用媒体查询来构建代码（即按媒体查询对代码进行分组），但这通常是个坏主意。 Eric Meyer，这里的 CSS 大师之一，says（以及许多其他前端爱好者会同意）你永远不应该这样做。我自己在一个项目上尝试过这种方法，我确认你的项目越大，这种代码结构就越痛苦。 SMACSS 和其他代码结构方法也建议不要这样做。

这种代码结构被广泛使用的地方是 CMS 基础主题（主题模板，也就是初学者工具包）。但它们旨在让用户快速覆盖默认样式，而不是从头开始构建。

问题是duplicate media queries don't really matter。尽管@cimmanon 可能不同意我的观点，但只有源代码 (SASS) 的可读性和可维护性才是重要的，因为每个现代 Web 服务器都为 CSS 代码提供压缩 (gzip)，它只能由机器读取。

当然，有很多方法可以通过使 CSS 变得异常庞大来破坏您的 CSS。使用非语义 CSS 框架就是其中之一。明智地应用大量本地媒体查询块并非如此。