LESS Breakpoint Mixins Using Rulesets

breakpoint-mixins

/*
ABOUT BREAKPOINT MIXINS
These are mad awesome. Feel free to add more if you find things acting wierd at a certain
screen size or zoom point. I am using em's based on 16px. Ideally if you aren't using a breakpoint
that means whatever you are working with should look good on a mobile device. 

Please refer to the LESS docs on how to use Mixins with Rulesets:
http://lesscss.org/features/#detached-rulesets-feature
*/

/*
LARGER MOBILE DEVICES
This is for devices like the Galaxy Note or something that's
larger than an iPhone but smaller than a tablet. Let's call them
tweeners.
~481px+
*/
.bp-mobile(@rules) {
	@media only screen and (min-width: 28.75em) { @rules(); } 
}

/*
TABLET & SMALLER LAPTOPS
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
~768px+
*/
.bp-tablet(@rules) {
	@media only screen and (min-width: 40.5em) { @rules(); }
}

/*
DESKTOP
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
~1030px+
*/
.bp-desktop(@rules) {
	@media only screen and (min-width: 64.375em) { @rules(); }
}

/*
LARGE VIEWING SIZE
This is for the larger monitors and possibly full screen viewers.
~1240px+
*/
.bp-large-screen(@rules) {
	@media only screen and (min-width: 77.5em) { @rules(); }
}
/*
RETINA (2x RESOLUTION DEVICES)
This applies to the retina iPhone (4s) and iPad (2,3) along with
other displays with a 2x resolution. You can also create a media
query for retina AND a certain size if you want. Go Nuts.
*/
.bp-retina(@rules) {
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	       only screen and (min--moz-device-pixel-ratio: 1.5),
	       only screen and (min-device-pixel-ratio: 1.5) { @rules(); }
}


/*
PRINT STYLESHEET
Feel free to customize this. Remember to add things that won't make
sense to print at the bottom. Things like nav, ads, and forms should
be set to display none.
*/
.bp-print(@rules) {
	@media print { @rules(); }
}