Sass For Web Designers code snippets

sfwd-snippets.scss

/*----------------------------------------*\
This is a collection of snippets from the
A Book Apart publication "Sass For Web
Designers", by Dan Cederholm.
\*----------------------------------------*/

$width-small: 400px;
$width-medium: 760px;
$width-large: 1200px;

/*-----------------------------*\
	Media Query Mixins
\*-----------------------------*/

@mixin responsive($width) {
	if $width == wide-screens {
		@media only screen (max-width: $width-large) { @content; }
	}
	@else if $width == medium-screens {
		@media only screen and (max-width: $width-medium) { @content; }
	}
	@else if $width == small-screens {
		@media only screen and (max-width: $width-small) { @content; }
	}
}

/*-----------------------------*\
	Retina Mixins
\*-----------------------------*/

$is-hidpi: "(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx)";

@mixin background-size($width, $height) {
	-webkit-background-size: $width $height;
	-moz-background-size: $width $height;
	background-size: $width $height;
}

@mixin retinize($file, $type, $width, $height) {
	// $path--rel is a variable for our image assets
	background-image: url($path--rel + $file + '.' + $type);

	@media #{$is-hidpi} {
		& {
			background-image: url($path--rel + $file + '-2x.' + $type);
			@include background-size($width, $height);
		}
	}
}

/*-----------------------------*\
	Use them
\*-----------------------------*/

h1 {
	font-size: 400px;
	@include responsive(wide-screens) {
		font-size: 48px;
	}
	@include responsive(medium-screens) {
		font-size: 32px;
	}
	@include responsive(small-screens) {
		font-size: 20px;
	}
}

li.twitter a {
	@include retinize('icon-twitter', 'png', 24px, 24px);
}

/*-----------------------------*\
	Compiles to
\*-----------------------------*/

h1 {
	font-size: 40px;
}
@media only screen and (max-width: 1200px) {
	h1 {
		font-size: 48px;
	}
}
@media only screen and (max-width: 760px) {
	h1 {
		font-size: 32px;
	}
}
@media only screen and (max-wdith: 400px) {
	h1 {
		font-size: 20px;
	}
}

li.twitter a {
	background-image: url("../img/icon-twitter.png");
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
	li.twitter a {
		background-image: url("../img/icon-twitter-2x.png");
		-webkit-background-size: 24px 24px;
		-moz-background-size: 24px 24px;
		background-size: 24px 24px; 
	}
}