SASS媒体查询占位符？

我发现这个方法可以轻松地添加@media块使用的mixin：SASS媒体查询占位符？

@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在文件的结尾，写在该块中的所有必要的风格。

但是，除了原始媒体查询风格之外，还可以编写媒体查询风格，这样可以更轻松地阅读和组织。

谢谢

来源

2013-07-12 hrsetyono

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

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

来源

2013-07-12 16:39:24 cimmanon

很高兴认识sass仍然不能支持这个。我一直在尝试很多，并失败 – hrsetyono

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

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

如果你想样式<p>和<跨度>各种媒体查询组合，你将不可避免地结束了的风格的一些分离，无论是在你的预处理或输出代码。

例如：

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

希望有所帮助。即使你最终输出的效率不高，它也不会实际上减慢浏览器的渲染速度，所以我会优先考虑编写可维护开发的代码。

来源

2013-07-12 19:48:13 jwfrench

谢谢！我会确定优先维护的代码。 – hrsetyono

SASS无法与媒体查询**结合使用，所以当您采用此代码风格时，重复媒体查询当前是不可避免的。

您可以在顶层（即通过媒体查询的组代码）对媒体查询构造代码，但这通常是一个糟糕的主意。 Eric Meyer是这里的CSS专家之一，says（和许多其他前端爱好者会同意），你永远不应该那样做。我已经在一个项目上自己尝试了这种方法，并且我确认了项目越大，这个代码结构就显得更加痛苦。SMACSS和其他代码结构方法也提出反对意见。

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

事情就是那个duplicate media queries don't really matter。尽管@cimmanon可能不同意我的观点，但只有源代码（SASS）的可读性和可维护性应该很重要，因为每个现代Web服务器都为只能由机器读取的CSS代码提供压缩（gzip）。

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

来源

2013-07-12 20:16:08

嗨，非常感谢。那么我会继续这种做法。我喜欢Eric Meyer如何同意“媒体查询应该尽可能接近” – hrsetyono

如果您想发表意见，请使用评论。看到某人复制/粘贴来自其他正确答案之一并贴上您的意见，然后获得接受，这是相当糟糕的。 – cimmanon

对不起，@cimmanon先生，我并不是故意冒犯你。事实上，我既没有复制一行，也没有在我的回答中贴上一行，也没有引用出版关于这个主题的书籍的专家来表达意见。此外，你已经接受了你的答案，所以我不明白你为什么抱怨。 –

SASS媒体查询占位符？

回答

相关问题