Rasmus Thulstrup thulstrup

What if controlling your media queries was as easy as adding on to a Sass list? What if I told you it now is?

This snippet comes from a modified version of mixins in the Aura Responsive Framework and came from me hijacking the respond-to mixin namespace but still wanting to use it for custom media queries. It's a little ugly and requires Sass 3.2+ (for now, (sudo) gem install sass --pre), but it works a charm.

There are two fairly mundane caveats to this method. First, every media query needs to be named. Second, every media query needs a size and assumes min-width and screen. If you want to change min-width, simply add your operator as another option, but if you want to change screen, you need to also include your operator even if you want it to be min-width.

Also, I haven't built in warnings yet for when you do bad things, so bear that in mind.

Without further adue, tada.

##Simply annoying Tweets

Annoyingly extended words (4+ of the same letter in a phrase): OOOOHHHHMMMMYYYYGGGGOOOODDDD

([a-z])/1{4}

Tweet w/ just a single hashtag: #omgthissucks

^ *#[^ ]+$

	// MEASUREMENTS

	// Grid types to work on -- column, scale
	$grid-type: column !default
	$scale-grid-direction: rtl !default
	$scale-grid-style: incremental !default

	$base-size: 16px !default
	$line-height: 1.3em !default

	// Media Queries in Sass 3.2
	//
	// These mixins make media queries a breeze with Sass.
	// The media queries from mobile up until desktop all
	// trigger at different points along the way
	//
	// And important point to remember is that and width
	// over the portrait width is considered to be part of the
	// landscape width. This allows us to capture widths of devices
	// that might not fit the dimensions exactly. This means the break

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>test</title>
	<link rel="stylesheet" href="stylesheets/screen.css">
	</head>
	<body>
	<div class="container c1"></div>
	<div class="container c2"></div>

	var parser = document.createElement('a');
	parser.href = "http://example.com:3000/pathname/?search=test#hash";

	parser.protocol; // => "http:"
	parser.hostname; // => "example.com"
	parser.port; // => "3000"
	parser.pathname; // => "/pathname/"
	parser.search; // => "?search=test"
	parser.hash; // => "#hash"
	parser.host; // => "example.com:3000"

	////////////////////////////
	// SURVIVAL KIT - BREAKPOINT
	// breakpoint($breakpoint, $media: 'screen')
	////////////////////////////

	$breakpoint-default-feature: min-width !default

	// create $breakpoint variables like so
	// assume $breakpoint-default-feature if only a number
	$breakpoint1: 500px

	<!DOCTYPE html>
	<!--[if lt IE 7 ]> <html lang="en" class="ie ie6"> <![endif]-->
	<!--[if IE 7 ]> <html lang="en" class="ie ie7"> <![endif]-->
	<!--[if IE 8 ]> <html lang="en" class="ie ie8"> <![endif]-->
	<!--[if IE 9 ]> <html lang="en" class="ie ie9"> <![endif]-->
	<!--[if (gt IE 9)\|!(IE)]><!--> <html lang="en"> <!--<![endif]-->

	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	function isRetina(){
	return (('devicePixelRatio' in window && devicePixelRatio > 1) \|\|
	('matchMedia' in window && matchMedia("(min-resolution:144dpi)").matches))
	}

	sudo defaults write /Library/Preferences/com.apple.windowserver DisplayResolutionEnabled -bool YES;
	sudo defaults delete /Library/Preferences/com.apple.windowserver DisplayResolutionDisabled;

	// by the way, you need to logout and log back in for this to take effect. Or at least that's what
	// Quartz Debug says. Who knows, maybe it's lying?

	// P.S. Go to [Apple menu --> System Preferences --> Displays --> Display --> Scaled] after logging
	// back in, and you'll see a bunch of "HiDPI" resolutions in the list to choose from.