Breakpoint Mixin for Media Queries, with Variables

breakpoint-mixin-variables.scss

$smallScreen: 400px;
$mediumScreen: 700px;

div.column {
	width: 100%;
	// column width changes to be half the viewport
	@include breakpoint($smallScreen) {
		width: 50%;
		float: left;
	}
	//column width changes again to be one third of the viewport
	@include breakpoint($mediumScreen) {
		width: 33%;
		float: left;
	}
}