epicmonkeez

<h1>Easy Media Queries Shortcodes (w/ LESS) + tester tag</h1>

<section>
    <h2>Media Queries Shortcodes <small>using LESS</small></h2>
    <p>I've been using this method for writing media queries on a couple of projects now and I'm growing very fond of it. It's pretty simple:</p>

    <p>Just set your breakpoints via LESS...</p>
    <pre>
// Breakpoints
// ------------------------- Source: http://blog.scur.pl/2012/06/variable-media-queries-less-css/

epicmonkeez

// type

.font-size(@font-size: 16){
@rem: (@font-size / 10);
font-size: @font-size * 1px;
font-size: ~"@{rem}rem"; }

.sans-serif {
font-family : "Helvetica Neue", Helvetica, Arial, sans-serif; }

epicmonkeez

.ie_rgba(@hex, @alpha:256){
	@newhex: `"#" + (Math.round("@{alpha}" * 256)).toString(16) + "@{hex}"`;

	background: transparent;
	-ms-filter: ~'"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{newhex},endColorstr=@{newhex})"'; /* IE8 */
	    filter: ~'progid:DXImageTransform.Microsoft.gradient(startColorstr=@{newhex},endColorstr=@{newhex})';   /* IE6 & 7 */
	      zoom: 1;
}

epicmonkeez

/**
 * LESS mixin for Nash Image Replacement (http://nicolasgallagher.com/css-image-replacement-with-pseudo-elements/)
 */

.nir(@image, @width: 100%, @height: 100%) {
	display: inline-block; overflow: hidden; width: @width; height: @height;
	&:before {
		content: url(@image);
		display: inline-block; line-height: 0; font-size: 0;
	}