GridSystem4.scss

$grid__column-width: (
	'300': $grid__column-width--300,
	'400': $grid__column-width--400,
	'500': $grid__column-width--500,
	'600': $grid__column-width--600,
	'700': $grid__column-width--700
);

$grid__gutter-width: (
	'300': $grid__gutter-width--300,
	'400': $grid__gutter-width--400,
	'500': $grid__gutter-width--500,
	'600': $grid__gutter-width--600,
	'700': $grid__gutter-width--700
);

// FUNCTIONS
@function grid-columns($numberOfColumns, $size, $extraGutter: false){ // extraGutter adds back in a gutter that we normally remove so that content doesn't go into the gutter space. Normally this will be for when this is used as a margin/padding.
	$columnWidth : map-get($grid__column-width, $size+"");
	$gutterWidth : map-get($grid__gutter-width, $size+"");

    @if $extraGutter {
        @return ($columnWidth * $numberOfColumns);
    }
    @else {
    	@return ($columnWidth * $numberOfColumns) - $gutterWidth;
    }
}

@function grid-gutter($size, $toEdge: false){
	$gutter-width : map-get($grid__gutter-width, $size+"");
	@if $toEdge {
		@return $gutter-width + ($gutter-width/2);
	}
	@else {
		@return $gutter-width;
	}
}