12 Column SASS Grid

grid.scss

$grid-gutter: 20px;
$grid-columns: 12;
$grid-size-names: xxs, xs, sm, md, lg;
$grid-size: 0, 480px, 720px, 900px, 1080px;

$xs: 480px;
$sm: 720px;
$md: 900px;
$lg: 1080px;

@mixin breakpoint($class) {
	@if $class == xxs {
		@media (max-width: $xs - 1) { @content; }
	}

	@if $class == xs {
		@media (min-width: $xs) { @content; }
	}

	@if $class == sm {
		@media (min-width: $sm) { @content; }
	}

	@if $class == md {
		@media (min-width: $md) { @content; }
	}

	@if $class == lg {
		@media (min-width: $lg) { @content; }
	} 
}

@mixin portrait {
	@media screen and (orientation:portrait) {
		@content;
	}
}

@mixin landscape {
	@media screen and (orientation:landscape) {
		@content;
	}
}

@mixin ipad-portrait {
	@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {
		@content;
	}
	@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) {
		@content;
	}
}

@mixin ipad-landscape {
	@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {
		@content;
	}
	@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1)  {
		@content;
	}
}


@mixin columnBaseProperties {
	display: block;
	position: relative;
	min-height: 1px;
	padding-right: #{($grid-gutter / 2)};
	padding-left: #{($grid-gutter / 2)};
	float: left;
}

* {
	box-sizing: border-box;
	
	&:before,
	&:after {
		box-sizing: border-box;
	}
}

.container {
	display: block;
	margin-right: auto;
	margin-left: auto;
	padding-right: #{($grid-gutter / 2)};
	padding-left: #{($grid-gutter / 2)};

	&:before, 
	&:after {
		display: table;
		content: ' ';
	}

}

.container-fluid {
	display: block;
	width: 100%;
	margin: 0 auto;
}

.row {
	display: block;
	margin-right: #{(-$grid-gutter / 2)};
	margin-left: #{(-$grid-gutter / 2)};

	&:before, 
	&:after {
		display: table;
		content: ' ';
	}
}

.pull-right {
	float: right !important;
}

.pull-left {
	float: left !important;
}

@each $size in $grid-size-names {

	@for $i from 1 through $grid-columns {
		.col-#{$size}-#{$i} {
			@include columnBaseProperties;
		}
	}
	
	.col-#{$size}-20, .col-#{$size}-40, .col-#{$size}-60, .col-#{$size}-80 {
		@include columnBaseProperties;
	}

	@include breakpoint($size) {
		.container {
			@if $size == xs {
				width: 100%;
			}
			@if $size == sm {
				width: $sm;
			}
			@if $size == md {
				width: $md;
			} 
			@if $size == lg {
				width: $lg;
			} 
		}

		@for $i from 1 through $grid-columns {
			.col-#{$size}-#{$i} {
				width: #{(100% / $grid-columns) * ($i)};
			}
		}

		.col-#{$size}-20 {
			@include columnBaseProperties;
			width: 20%;

		}

		.col-#{$size}-40 {
			@include columnBaseProperties;
			width: 40%;
		}

		.col-#{$size}-60 {
			@include columnBaseProperties;
			width: 40%;
		}

		.col-#{$size}-80 {
			@include columnBaseProperties;
			width: 40%;
		}
	}
}