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つのメディアクエリブロックにコンパイルするにはどうすればよいですか?

4

1 に答える 1

5

This is how I do my media queries in LESS, utilising query bubbling as outlined in the article you linked to:

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

Unfortunately though there is no way to have it all compile down to one media query block. This may also be the case with SASS/SCSS. The only reason this could be a problem is that is increases file size.

However you shouldn't worry about that. Why? The repetition of multiple media query blocks is negated by GZIP (more repetition == better compression). So providing your server is encoding with GZIP (most do, if not you should be able to enable it, it's worthwhile) you will not see any/much increase in file size.

Finally, even discounting GZIP, I still wouldn't want it to compile to one media query block. On any large CSS code base the proximity of having media queries next to the selectors is useful and desirable

于 2013-06-10T00:02:10.727 に答える