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

我发现此方法可以使用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 { ... }
}

它复制了将使CSS膨胀的

@media…

部分

有没有办法让mixin充当占位符？因此，它将组合所有

@内容

，并将其放在同一

@媒体下…

块

所以结果会是这样的

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

我知道我可以把

@include phone

放在文件的末尾，然后在该块中写入所有必要的样式

但是，除了原始的媒体查询样式之外，编写媒体查询样式更易于阅读和组织

---

谢谢

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

---

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

如果您试图为和各种媒体查询组合样式，那么您将不可避免地在预处理或输出代码中分离样式

例如：

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

---

希望有帮助。即使您最终得到的输出感觉“效率较低”，它实际上也不应该降低浏览器呈现的速度，因此我要说的是，优先编写感觉可维护的代码。

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

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

这种代码结构广泛应用于CMS基本主题（主题模板又称初学者工具包）。但它们的目的是允许用户快速覆盖默认样式，而不是从头开始构建

问题是这个问题。尽管@cimmanon可能不同意我的观点，但只有源代码（SASS）的可读性和可维护性才重要，因为每个现代web服务器都为机器只读的CSS代码提供压缩（gzip）

---

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

您好，非常感谢。届时我会继续采用这方法。我喜欢埃里克·迈耶（Eric Meyer）赞同“媒体查询应尽可能靠近”的观点。如果你想表达观点，请使用评论。看着别人从其他正确答案中复制/粘贴答案，然后粘贴到你的意见中，然后得到接受，这真是太糟糕了。对不起，@cimmanon先生，我不是有意冒犯你的。事实上，我并没有在我的答案中加上一行字，也不认为引用一位出版这方面书籍的专家来表达自己的观点。另外，你的答案被接受了，所以我不明白你为什么抱怨。“重复的媒体查询并不重要”-你是否碰巧有任何来源表明性能影响可以忽略不计？@wheresrhys引用Snugug:不管怎样，在断点问题队列上（）我们详细分析了组合与分散媒体查询是否会对性能产生影响，并得出结论，这种差异虽然丑陋，但在最坏的情况下是最小的，在最好的情况下基本上是不存在的。很高兴知道sass仍然不能支持这一点。我做了很多实验，但都失败了

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