Simple SASS Grid

grid.scss

/* Grid Variables */
$grid-columns: 12;
$grid-max-width: 1920px;

/* Break Points */
$breakpoint-xs: "screen and (min-width: 320px)";
$breakpoint-ms: "screen and (min-width: 480px)";
$breakpoint-sm: "screen and (min-width: 768px)";
$breakpoint-md: "screen and (min-width: 1024px)";
$breakpoint-lg: "screen and (min-width: 1280px)";
$breakpoint-xl: "screen and (min-width: 1600px)";

*,
*:after,
*:before {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.wrapper {
	*zoom:1;
	width: 100%;
	max-width: 1920px;
	margin: 0 auto;
}

.row {
	*zoom:1;
	width: 100%;
}

.wrapper:after,
.wrapper:before,
.row:after,
.row:before {
	content:"";
	display: table;
}

.wrapper:after,
.row:after {
	display:block;
}

[class*='col-'] {
    float: left;
    width: 100%;
    min-height: 1px; 
    } 

/* XS screen size */
@media #{$breakpoint-xs} {
	@for $i from 1 through 12 {
		.col-xs-#{$i} {
			width: 100% / 12 * $i;
		}
	}
}

/* MS screen size */
@media #{$breakpoint-ms} {
	@for $i from 1 through 12 {
		.col-ms-#{$i} {
			width: 100% / 12 * $i;
		}
	}
}

/* SM screen size */
@media #{$breakpoint-sm} {
	@for $i from 1 through 12 {
		.col-sm-#{$i} {
			width: 100% / 12 * $i;
		}
	}
}

/* MD screen size */
@media #{$breakpoint-md} {
	@for $i from 1 through 12 {
		.col-md-#{$i} {
			width: 100% / 12 * $i;
		}
	}
}

/* LG screen size */
@media #{$breakpoint-lg} {
	@for $i from 1 through 12 {
		.col-lg-#{$i} {
			width: 100% / 12 * $i;
		}
	}
}

/* XL screen size */
@media #{$breakpoint-xl} {
	@for $i from 1 through 12 {
		.column-xl-#{$i} {
			width: 100% / 12 * $i;
		}
	}
}