3

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

@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文件末尾并在该块中写入所有必要的样式。

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

谢谢

4

3 回答 3

2

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

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

如果您尝试为各种媒体查询组合 <p> 和 <span> 的样式，则不可避免地会在预处理或输出代码中出现一些样式分离。

例如：

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

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

于 2013-07-12T19:48:13.523 回答
2

Sass does not have that functionality at this time. Your only option is to manually group your styles within a single media query (or use a 3rd party CSS compressor that has that functionality).

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

于 2013-07-12T16:39:24.593 回答
0

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

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

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

问题是重复的媒体查询并不重要。尽管@cimmanon 可能不同意我的观点，但只有源代码 (SASS) 的可读性和可维护性才是重要的，因为每个现代 Web 服务器都为 CSS 代码提供压缩 (gzip)，它只能由机器读取。

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

于 2013-07-12T20:16:08.840 回答