Em-based embedded media queries with LESS

embedded-media-queries.less

/* --------------------------------------------
   EM-BASED EMBEDDED MEDIA QUERIES WITH LESS
---------------------------------------------*/
 
/* The following are defaults for media queries. Additional custom measurements 
 may be needed for certain elements, although non-content-based breakpoints 
 are quite convenient. These are proportional media queries using ems. Ems are a 
 browser-based font size, (example - 16px = 14pt = 1em ). For more information, 
 check out: http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
 P = Portrait orientation, L = Landscape orientation

/* EXAMPLE USE:
 GOOD using only the variable:
 @media all and (max-width: @tabletWidth) {
   body {
     background: #EDEDED;
   }
 }
 
 BEST with embedded media queries:
 body {
 	@media @tabletWidth {
 		background: #EDEDED;
 	}
 }
 
Best is subjective. Embedded media queries do increase file size, but we are probably 
talking about a few kilobytes more with compression. However, if the CSS got too large, 
I would recommend breaking it into separate files and loading it in modules to allow
this highly developer-friendly media query format.
 
This file is just LESS variables, so there's no output from it to CSS, once minified.
*/
 
@bfs: 16;	/* Base Font Size in pixels, 16px = 14pt = 1em */
 
/* Breakpoints
These are em values based off of pixel values, please change to your preference. */
@phoneValueMax: (( 599 / @bfs ) + 0em);
@tabletPValue: (( 768 / @bfs ) + 0em);
@desktopValue: (( 768 / @bfs ) + 0em);
@desktopWideValue: (( 960 / @bfs ) + 0em);

/* STOP: THE FOLLOWING ARE FORMULAS AND DO NOT NEED TO BE EDITED - - - - - - - - - */
 
/* Derrivative variables
These are derrivative variables so that breakpoints don't overlap. That is, 
the widest tablet width isn't the same as the smallest desktop width. Otherwise,
your queries will collide and override each other. */
@onePixel: 0.063em;
@desktopValueMinusOne: (@desktopValue - @onePixel);
@desktopWideValueMinusOne: (@desktopWideValue - @onePixel);
@phoneValueMin: (( 320 / @bfs ) + 0em);
@phoneValuePlusOne: (@phoneValueMin + @onePixel);
@tabletPValueMinusOne: (@tabletPValue - @onePixel);
@tabletPValuePlusOne: (@tabletPValue + @onePixel);
@tabletValueMin: (@phoneValueMax + @onePixel);
 
/* Use these in your embedded media query rules. */
@phone: ~"screen and (max-width: @{phoneValueMax} )";
@phoneP: ~"screen and (max-width: @{phoneValueMin}";
@phoneL: ~"screen and (min-width: @{phoneValuePlusOne}) and (max-width: @{phoneValueMax}px)";
 
@phoneAndTablet: ~"screen and (max-width: @{tabletPValue})";
@tablet: ~"screen and (min-width: @{tabletValueMin}) and (max-width: @{desktopValueMinusOne})";
@tabletUp: ~"screen and (min-width: @{tabletValueMin})";
@tabletP: ~"screen and (min-width: @{tabletValueMin}) and (max-width: @{tabletPValue})";
@tabletPUp: ~"screen and (min-width: @{tabletPValue})";
@tabletPDown: ~"screen and (max-width: @{tabletPValueMinusOne})";
@tabletL: ~"screen and (min-width: @{tabletPValuePlusOne}) and (max-width: 1024px)";
 
@desktop: ~"screen and (min-width: @{desktopValue})";
@notDesktop: ~"screen and (max-width: @{desktopValueMinusOne})";
@desktopWide: ~"screen and (min-width: @{desktopWideValue})";
@notDesktopWide: ~"screen and (max-width: @{@desktopWideValueMinusOne})";