Mobile-First SASS Stylesheet

Mobile-First_SASS_Stylesheet

/* ========================================================
 * This is a mobile-first stylesheet I've lovingly adopted from
 * the designers from Themble: it's just an intuitive skeleton. 
 * There is no actual styling going on in this gist, but it's 
 * completely up to you to fill in the blanks. Here's to a speedy
 * development : ). 

 * So, basically, your base styles come first and exist
 * outside the media queries and they'll be called in the 
 * beginning. Leave these for your lowest denominator: slow
 * 3G network on an old phone. Keep it light weight.

 * Create the following .scss files:
 - mixins.scss (Store your variables and mixins separately)
 - base.scss (Base Styles and Standard Phone Size)
 - 481up.scss (Large Phones, Small Tablets)
 - 768up.scss (Tablets and Small Laptops)
 - 1030up.scss (Desktops, &c.)
 - 1240up.scss (Large Screens)
 - 2x.scss (Retina Displays)

  ======================================================== */

/* ====================
 * Resets and Variables
 * ==================== */
@import "reset";
@import "mixins"; 

/* ====================
 * Base (Mobile) Styles
 * ==================== */
@import "base";

/* ====================
 * Large Phones, Small Tablets
 * ==================== */
@media only screen and (mid-width: 481px) {

     @import "481up";

}

/* ====================
 * Tablets and Small Laptops
 * ==================== */
@media only screen and (min-width: 768px) {

     @import "768up";

}

/* ====================
 * Desktop
 * ==================== */
@media only screen and (min-width: 1030px) {

     @import "1030up";

}

/* ====================
 * Large Screens
 * ==================== */
@media only screen and (min-width: 1240px) {

     @import "1240up";

}

/* ====================
 * Retina Displays
 - This applies to the retina iPhone (4s) and 
 - iPad (2, 3) along with other displays with 
 - a 2x resolution. 
 * ==================== */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (mix-device-pixel-ratio: 1.5) {

     @import "2x";

}

/* ====================
 * Print Stylesheet
 - Remember to tweak for things that won't make sense
 - to print. Navs, ads, and forms should probably be
 - set to display: none.
 * ==================== */
@media print { 
	* { 
		background: transparent !important; 
		color: black !important; 
		text-shadow: none !important; 
		filter:none !important; 
		-ms-filter: none !important; 
	} 
	
	a, a:visited { 
		color: #444 !important; 
		text-decoration: underline; 
		
		/* show links on printed pages */
		&:after { 
			content: " (" attr(href) ")"; 
		}
		
		/* show title too */
		abbr[title]:after { 
			content: " (" attr(title) ")"; 
		}
	} 
	
	.ir a:after, 
	a[href^="javascript:"]:after, 
	a[href^="#"]:after { 
		content: ""; 
	} 
	
	pre, blockquote { 
		border: 1px solid #999; 
		page-break-inside: avoid; 
	} 
	
	thead { 
		display: table-header-group; 
	} 
	
	tr, img { 
		page-break-inside: avoid; 
	} 
	
	img { 
		max-width: 100% !important; 
	}
    
    @page { 
    	margin: 0.5cm;
    } 
    
    p, h2, h3 { 
    	orphans: 3; 
    	widows: 3; 
    } 
    
    h2, 
    h3 { 
    	page-break-after: avoid; 
    }
    
    /* hide content people who print don't need to see */
    .sidebar,
    .page-navigation, 
    .wp-prev-next,
    .respond-form,
    nav {
    	display: none;
    }
}