3

http://css-tricks.com/media-queries-sass-3-2-and-codekit/ 我最近在阅读 scss 时发现了这种技术。我开始喜欢写lesscss，我宁愿不切换。我很好奇 lesscss 有什么选择来完成类似的技术？我真的很喜欢在主类/id 声明中编写媒体查询的想法。

@mixin breakpoint($point) {
  @if $point == papa-bear {
    @media (max-width: 1600px) { @content; }
  }
  @else if $point == mama-bear {
    @media (max-width: 1250px) { @content; }
  }
  @else if $point == baby-bear {
    @media (max-width: 650px)  { @content; }
  }
}

.page-wrap {
  width: 75%;
  @include breakpoint(papa-bear) { width: 60%; }
  @include breakpoint(mama-bear) { width: 80%; }
  @include breakpoint(baby-bear) { width: 95%; }
}

更新

我已经找到了这个答案http://blog.scur.pl/2012/06/variable-media-queries-less-css/我唯一的批评是我怎样才能让它让媒体查询变得多余？我如何将这一切编译成 1 个 mediaquery 块？

4

1 回答 1

5

这就是我在 LESS 中进行媒体查询的方式，使用您链接到的文章中概述的查询冒泡：

@palm : ~"screen and (max-width: 40em)";
@lap : ~"screen and (min-width: 50em)";
@desk : ~"screen and (min-width: 60em)";


.some-class {
    color: red;

    @media @lap {
       color: blue;
    }
}

不幸的是，虽然没有办法将它全部编译成一个媒体查询块。这也可能是 SASS/SCSS 的情况。这可能是一个问题的唯一原因是增加了文件大小。

但是，您不应该担心这一点。为什么？GZIP 否定了多个媒体查询块的重复（更多重复 == 更好的压缩）。因此，如果您的服务器使用 GZIP 进行编码（大多数情况下，如果没有，您应该能够启用它，这是值得的），您将不会看到文件大小有任何/大幅增加。

最后，即使不考虑 GZIP，我仍然不希望它编译为一个媒体查询块。在任何大型 CSS 代码库中，靠近选择器的媒体查询是有用且可取的

于 2013-06-10T00:02:10.727 回答