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

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

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

如果您正在尝试为＆lt; p＆gt;组合样式和＆lt; span＆gt;对于各种媒体查询，您将不可避免地在预处理或输出代码中找到一些样式分离。

例如：

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

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

Answer 2

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

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

Answer 3

SASS无法将扩展与媒体查询结合**，因此当您采用此代码样式时，重复的媒体查询目前是不可避免的。

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

这个代码结构被广泛使用的地方是CMS基本主题（主题模板又名入门套件）。但它们旨在允许用户快速覆盖默认样式而不是从头开始构建。

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

当然，有很多方法可以破坏你的CSS，使其变得无比巨大。使用非语义CSS框架就是其中之一。明智地应用大量本地媒体查询块不是。

SASS占位符用于媒体查询？

3 个答案: