Question

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个媒体查询块？

Answer 1

这就是我在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代码库上，在选择器旁边进行媒体查询的接近度是有用的和可取的

较少有像SCSS这样的“响应”技术

1 个答案: