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

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

UPDATE

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

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代码库上,在选择器旁边具有媒体查询的接近度是有用的和期望的