Variable column grid system with ratios ala PURE in very little SCSS

grid.scss

// Globals
$screen-width: 1280px;

// Grid
$column-granularity: 12;
$column-gutter: 20px;

// Dimensions (responsive)
$screen-xs-max: 567px;
$screen-sm-min: 568px;
$screen-sm-max: 767px;
$screen-md-min: 768px;
$screen-md-max: 1023px;
$screen-lg-min: 1024px;
$screen-lg-max: 1279px;
$screen-xl-min: 1280px;

$screen-sizes: (xs sm md lg xl);
$screen-bounds: (
	xs: (
		max: $screen-xs-max
	),
	sm: (
		min: $screen-sm-min,
		max: $screen-sm-max
	),
	md: (
		min: $screen-md-min,
		max: $screen-md-max
	),
	lg: (
		min: $screen-lg-min,
		max: $screen-lg-max
	),
	xl: (
		min: $screen-xl-min,
	)
);

@function greatest-common-divisor ($a, $b) {
	@while $a != $b {
		@if ($a > $b) {
			$a: $a - $b;
		} @else {
			$b: $b - $a;
		}
	}

	@return $a;
}

@mixin standard-grid($numerator, $denominator, $prefix: "grid") {
	@if (greatest-common-divisor($numerator, $denominator) == 1) {
		.#{$prefix}-#{$numerator}-#{$denominator} {
			display: inline-block;
			box-sizing: border-box;
			width: percentage($numerator/$denominator);
			padding-left: $column-gutter;
			padding-right: $column-gutter;
			font-size: 18px;
		}

		@if $denominator >= 2 {
			@for $count from 1 through ($denominator - 1) {
				.#{$prefix}-#{$numerator}-#{$denominator}-push-#{$count} {
					position: relative;
					left: percentage($numerator/$denominator*$count);
				}
				.#{$prefix}-#{$numerator}-#{$denominator}-pull-#{$count} {
					position: relative;
					right: percentage($numerator/$denominator*$count);
				}
			}
		}
	}
}

@mixin media-query($min, $max: null) {
	@if ($min and $max) {
		@media screen and (min-width: #{$min}) and (max-width: #{$max}) {
			@content;
		}
	} @else if ($min) {
		@media screen and (min-width: #{$min}) {
			@content;
		}
	} @else if ($max) {
		@media screen and (max-width: #{$max}) {
			@content;
		}
	} @else {
		@content;
	}
}

.grid {
	margin-left: -$column-gutter;
	margin-right: -$column-gutter;
	display: block;
	font-size: 0;
}

@for $denominator from 1 through $column-granularity {
	@for $numerator from 1 through $denominator {
		@include standard-grid($numerator, $denominator);
	}
}

@each $size in $screen-sizes {
	$range: map-get($screen-bounds, $size);
	$min: map-get($range, min);
	$max: map-get($range, max);

	@include media-query($min) {
		@for $denominator from 1 through $column-granularity {
			@for $numerator from 1 through $denominator {
				@include standard-grid($numerator, $denominator, "grid-#{$size}");
			}
		}
	}
}

@each $size in $screen-sizes {
	$range: map-get($screen-bounds, $size);
	$min: map-get($range, min);
	$max: map-get($range, max);

	@include media-query($min, $max) {
		@each $other-size in $screen-sizes {
			@if($other-size == $size) {
				.hidden-#{$other-size} {
					display: none;
				}
			} @else {
				.visible-#{$other-size} {
					display: none;
				}

			}
		}
	}
}