gistfile1.scss

// 4 width grid = 960px
$gridSize: 236px;
$gridSpacing: 5px; // External spacing
$mobileSpacing: 10px; // External spacing on mobile
$cellPadding: 15px; // Internal padding

@function gridSize($columns) {
	@return $columns * ($gridSize + $gridSpacing) - $gridSpacing;
}

$desktopSize: gridSize(4) + 20px; // Min size for desktop - 10px margin on each side
$tabletSize: gridSize(3) + 10px; // Min size for 3column tablet
$miniSize: gridSize(2) + 8px; // Min size for 2 column tablet (smaller is mobile)

@mixin desktop {
	@media screen and (min-width: $desktopSize)  {
		@content;
	}
}
@mixin smallerThanDesktop {
	@media screen and (max-width: ($desktopSize - 1))  {
		@content;
	}
}
@mixin tablet {
	@media screen and (min-width: $tabletSize) and (max-width: ($desktopSize - 1))  {
		@content;
	}
}
@mixin smallerThanTablet {
	@media screen and (max-width: ($tabletSize - 1))  {
		@content;
	}
}
@mixin mini {
	@media screen and (min-width: $miniSize) and (max-width: ($tabletSize - 1))  {
		@content;
	}
}
@mixin smallerThanMini {
	@media screen and (max-width: ($miniSize - 1))  {
		@content;
	}
}
@mixin mobile {
	// alias for smallerThanMini
	@include smallerThanMini {
		@content;
	}
}

@mixin retina {
	@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
		only screen and (-o-min-device-pixel-ratio: 13/10),
		only screen and (min-resolution: 120dpi) {
		@content;
	}
}

Usage:

// I want this style for my mobile page
@include mobile {
    max-width: gridSize(2);
}