SASS: Inner Column & Breakpoint Setup

SASS: Inner Column & Breakpoint Setup

$mobileColumn: 400;
$narrowColumn: 700;
$multiColumn: 1000;

$mainWidth: $narrowColumn - 40;
$multiWidth: $multiColumn - 40;
$narrowWidth: 95%;
$mobileWidth: 90%;

@mixin breakpoint($point) {
	@if $point == mobile {
		@media screen and (max-width: $mobileColumn * 1px) { @content }
	}
	@if $point == narrowColumn {
		@media screen and (max-width: $narrowColumn * 1px) { @content }
	}
	@if $point == multiColumn {
		@media screen and (min-width: $multiColumn * 1px){ @content }
	}
}

.inner-col {
	position: relative;
	margin: 0 auto;
	width: $mainWidth * 1px;
	@include breakpoint(multiColumn) {
		width: $multiWidth * 1px;
	}
	@include breakpoint(narrowColumn) {
		width: $narrowWidth;
	}
}