Each and every last column

grid.scss

$gutter: 100% / 36.2;
$gutter_em: 1rem; //This needs to be rem to not mess up margins

// This calculate the gutter
@function col_width($n, $use_calc: false) {
	$divisor: 12 / $n;
	@if ($use_calc) {
		$gutter_offset: $gutter_em * ($divisor - 1);
		@return calc((100% - #{$gutter_offset}) / #{$divisor});
	}
	@else {
		@return (100% - $gutter * ($divisor - 1)) / $divisor;
	}
}

// Each number here becomes a grid: onecol, twocol etc. 
$grids: one, two, three, four, five, six, seven, eight, nine, ten, eleven, twelve;
$i: 1;
@each $grid in $grids {
	.#{$grid}col {
		width: col_width( $i );
		width: col_width( $i, true );
	}
	
	%#{$grid}col {
		width: col_width( $i );
		width: col_width( $i, true );
	}
	$i: $i + 1;
}

/*	//This is how i've been using responsive widths, you're able to overwrite these per stylesheet

	article {
		width: col_width(6);
		width: col_width(6, true);
		
		float: left;
		margin-left: $gutter;
		margin-left: calc(#{$gutter_em} * 1);	
			
		&.first{ margin-left: 0;}
		&.last{ float: right;}
	}
*/


// This then collates these classes into one class to apply the gutter
$classes: ();
@each $grid in $grids {
    $classes: join($classes, unquote(".#{$grid}col"), comma);
}

#{$classes}, .fifthcol, .threefifth{
  position: relative;
  float: left;
  margin-left: $gutter;
  margin-left: calc(#{$gutter_em} * 1);
}

%grid{
  position: relative;
  float: left;
  margin-left: $gutter;
  margin-left: calc(#{$gutter_em} * 1);
}

.first {
  margin-left: 0;
}

.last {
  float: right;
}


// Extra Gutters

.gutter-top{
	margin-top: $gutter;
	margin-top: calc(#{$gutter_em} * 1);
}

.gutter-bottom{
	margin-bottom: $gutter;
	margin-bottom: calc(#{$gutter_em} * 1);
}