Fancy media queries with some LESS magic

Question

It would be nice to wrap CSS styles for different resolutions inside some css classes, using less.

I would like to do something like:

footer { width: 100%; } .tablet { footer { width: 768px; } } .desktop { footer { width: 940px; } } 

At the end, you should get the following:

 footer { width: 100%; } @media screen and (min-width: 768px) { footer { width: 768px; } } @media screen and (min-width: 992px) { footer { width: 940px; } } 

.tablet might look something like this:

 @media screen and (min-width: 768px) { .tablet { } } 

Hope someone has a good idea!

Answer 1

Here is what I did in my projects:

 @desktop: ~"only screen and (min-width: 960px) and (max-width: 1199px)"; @tablet: ~"only screen and (min-width: 720px) and (max-width: 959px)"; @media @desktop { footer { width: 940px; } } @media @tablet { footer { width: 768px; } } 

This allows you to define only your media queries once, and you can use it in your smaller files. Also a little easier to read. :)

Answer 2

I completely agree with the answer of Hai Nguyen (which was accepted), but you can clean it up a bit by doing something like this:

 @desktop: ~"only screen and (min-width: 960px) and (max-width: 1199px)"; @tablet: ~"only screen and (min-width: 720px) and (max-width: 959px)"; footer{ width: 100%; @media @tablet { width: 768px; } @media @desktop { width: 940px; } } 

This is essentially the same, but allows you to embed your media queries inside the original selector. It saves all the css for a specific element together and makes your styles more modular (compared to a split breakpoint method).

Answer 3

+1 for Nguyen and Yancey - and another addition.

If you want an explicit definition for the width, you can accomplish this with string interpolation and variables for your breakpoints. Here, for example, with bootstrap settings - strict rules - this is to prevent the definition from overlapping.

 /* setup */ @xs-min: 480px; @sm-min: 768px; @md-min: 992px; @lg-min: 1200px; @xs-max: (@sm-min - 1); @sm-max: (@md-min - 1); @md-max: (@lg-min - 1); @phone: ~"only screen and (min-width: @{xs-min})"; @phone-strict: ~"only screen and (min-width: @{xs-min}) and (max-width: @{xs-max})"; @tablet: ~"only screen and (min-width: @{sm-min})"; @tablet-strict: ~"only screen and (min-width: @{sm-min}) and (max-width: @{sm-max})"; @desktop: ~"only screen and (min-width: @{md-min})"; @desktop-strict: ~"only screen and (min-width: @{md-min}) and (max-width: @{md-max})"; @large: ~"only screen and (min-width: @{lg-min})"; /* usage */ footer{ width: 100%; @media @tablet { width: 768px; } @media @desktop { width: 940px; } } 

Answer 4

And you can also combine media queries like this

 @media @desktop, @tablet, @ipad{ //common styles... } 

Answer 5

We use the following installation:

 @vp_desktop: 801px; @vp_tablet: 800px; @vp_mobile: 400px; .OnDesktop(@rules) { @media screen and (min-width:@vp_desktop){ @rules(); } }; .OnTablet(@rules) { @media screen and (max-width:@vp_tablet){ @rules(); } }; .OnMobile(@rules) { @media screen and (max-width:@vp_mobile){ @rules(); } }; 

You only need to set the variables, mixins handle the rest, so it is very easy to maintain, but still flexible:

 div { display: inline-block; .OnTablet({ display: block; }); } 

It is worth noting that although this method is very simple, if used poorly, your CSS output will be filled with media queries. I am trying to limit my media queries to 1 breakpoint, for each file. Where the file will be header.less or search.less.

NB This method probably will not compile unless you use the javascript compiler.

Answer 6

I use these mixins and variables

 .max(@max; @rules){@media only screen and (max-width: (@max - 1)){@rules();}} .min(@min; @rules){@media only screen and (min-width: @min){@rules();}} .bw(@min; @max; @rules){@media only screen and (min-width: @min) and (max-width: (@max - 1)){@rules();}} @pad: 480px; @tab: 800px; @desktop: 992px; @hd: 1200px; 

So this is

 footer{ width: 100%; .bw(@tab,@desktop,{ width: 768px; }); .min(@desktop,{ width: 940px; }); } 

becomes

 footer { width: 100%; } @media only screen and (min-width: 800px) and (max-width: 991px) { footer { width: 768px; } } @media only screen and (min-width: 992px) { footer { width: 940px; } }