css - less有像SCSS那样的 "respond-to"技术吗

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

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;
    }
}

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

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

最后，即使不考虑 GZIP，我仍然不希望它编译成一个媒体查询 block 。在任何大型 CSS 代码库上，在选择器旁边设置媒体查询是有用且可取的