Generated by SassMeister.com. http://sassmeister.com/gist/594f63442901485c8ed6

SassMeister-input-HTML.html

<div class="grid-one">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

<div class="grid-two">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

SassMeister-input.scss

// ----
// libsass (v3.1.0)
// ----

@import "susy";


// Wrapping gutter ratio calculation
// would be nice if it were build-in :)
@function gutter-ratio(
  $grid-map,
  $silent: false
  ){
  $base-width: _susy-deep-get($grid-map, base-width);
  @if not $base-width { 
    // We did not set a base-width
    @return $map; 
  }
  
  // Merge grid map and defaults
  $map: _susy-deep-merge($susy-defaults, $grid-map);
  
  $gutters : susy-get(gutters, $map); 

  // Make silent gutter validation
  @if valid-gutters($gutters, true){
    // Gutters are not invalid (unitless)
    @return $map;
  }
  $columns: susy-get(columns, $map); 
  $position: susy-get(gutter-position, $map); 
  $spread: if(is-split($position),0,-1);
  
  // TODO – Add unit conversion between base-width and gutters
  
  $total-gutter-width: $gutters * ($columns + $spread);
  // Gutter size causes span to become negative or NaN%        
  @if $base-width / $columns <= $total-gutter-width / ($columns + $spread) and not($silent) {
  	$warn: 'Gutters must be less than: #{$total-gutter-width / ($columns + $spread)}';
  	@warn $warn ; 
  }
  
  $total-span-width: $base-width - $gutters * ($columns + $spread);
  $ratio: $total-gutter-width / ($columns + $spread) / $total-span-width * $columns;
  
  // Add calculated gutter ratio
  @return map-merge($map, (gutters: $ratio));
}



//
// Config
//

$base-width: 1180px;  // Design width matching e.g a photoshop file
$max-width : 1400px;  // Maximum grid width   
$gutter-width: 47px;  // Gutter width according to design

// When creating the grid set the max-width to
// equal the base-width (design width).   
$max-width: $base-width;



//
// Gutter position: after
//
$grid-one: (
  columns: 12,
  base-width: $base-width,
  gutters: $gutter-width,
);

//
// Gutter position: split
//
$grid-two: (
  columns: 12,
  base-width: $base-width,
  gutters: $gutter-width,
  gutter-position: split
  
);

//
// Calculate the gutter ratio
//
$grid-one: gutter-ratio($grid-one, true);
$grid-two: gutter-ratio($grid-two, true);







.grid-one > div {
  @include span(1 of $grid-one);
  &:nth-of-type(12n){ @include span(1 at 12 of $grid-one);}
  background:#FF0080;
  overflow:hidden;
}
.grid-two > div {
  @include span(1 of $grid-two);
  background: #00BFFF;
  overflow:hidden;
}



.grid-one,.grid-two {
  background: whitesmoke;
  @include container($max-width);
  margin-bottom:20px;
  padding:20px 0;
  clear:left;
}
body {
  &:before { 
    content:'Gutter: #{$gutter-width}';
    font:14px sans-serif;
  }
}

SassMeister-output.css

.grid-one > div {
  width: 4.6822%;
  float: left;
  margin-right: 3.98305%;
  background: #FF0080;
  overflow: hidden; }
  .grid-one > div:nth-of-type(12n) {
    width: 4.6822%;
    float: right;
    margin-right: 0; }

.grid-two > div {
  width: 4.35028%;
  float: left;
  margin-left: 1.99153%;
  margin-right: 1.99153%;
  background: #00BFFF;
  overflow: hidden; }

.grid-one, .grid-two {
  background: whitesmoke;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  padding: 20px 0;
  clear: left; }
  .grid-one:after, .grid-two:after {
    content: " ";
    display: block;
    clear: both; }

body:before {
  content: 'Gutter: 47px';
  font: 14px sans-serif; }

SassMeister-rendered.html

<div class="grid-one">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

<div class="grid-two">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>