Lazy breakpoints and IE8 fallback for SCSS.

breakpoint-mixin

// Vars (I put these in a _globals.scss with all my other variables)
// ------------------------
$breakpointTiny: 580;
$breakpointSmall: 790;
$breakpointNormal: 1200;

// Breakpoint Mixin
// ------------------------
$oldie: false !default;

// Mixin to add specific styles to older browsers, namely IE8.
@mixin oldie {
	@if $oldie {
		// Wrap the oldies.
		.oldie & {
			@content;
		}
	}
}

@mixin breakpoint($type) {
	$width: 0 !default;

	// Get width from globals.
	@if $type == tiny {
		$width: $breakpointTiny;
	}
	@else if $type == small {
		$width: $breakpointSmall;
	}
	@else if $type == normal {
		$width: $breakpointNormal;
	}
	// Test if type is at least a number.
	@else if round($type) == $type {
		$width: $type
	}
	// Else throw a meaningful warning.
	@else {
		@warn "Breakpoint param is neither a knoown var nor is it a number!";
	}


	// Add media query for $width and oldies.
	@media (min-width: em($width))  { @content; }

	// Create styles for oldies?
	@if $oldie {
		@if $oldie >= $width {
			// Wrap the oldies.
			// .oldie & {
			@include oldie {
				@content;
			}
		}
	}

}

With vars

@include breakpoint(tiny) { ... }
@include breakpoint(small) { ... }
@include breakpoint(normal) { ... }

With numbers (px)

@include breakpoint(765) { ... }
@include breakpoint(2341) { ... }

Fallback for older browsers

E.g. setting $oldie: to 1024 will generate .oldie styles for media queries equal and larger than 1024px.