CODEWITHSUNDEEP
cssless
John Abraham
John Abraham

Reputation: 18811

Does less have the "respond-to" technique like SCSS

http://css-tricks.com/media-queries-sass-3-2-and-codekit/ I recently discovered this technique while reading about scss. I've come to enjoy writing lesscss and I would rather not switch. I was curious as to what options lesscss has to accomplishing a similar technique? I really like the idea of writing media queries inside the primary class/id declaration.

@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

I have found this answer http://blog.scur.pl/2012/06/variable-media-queries-less-css/ my only critism is how can I make it so that the media queries arnt redundant? how would I make this all compile into 1 mediaquery block?

Upvotes: 3

Views: 1241

Answers (1)

WickyNilliams
WickyNilliams

Reputation: 5308

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

Upvotes: 5

Related Questions