Generated by SassMeister.com.

SassMeister-input-HTML.html

<div id="container">
  <div class="first">First</div>
  <div class="second">Second</div>
  <div class="third">Third</div>
  <div class="fourth">Fourth</div>
</div>

SassMeister-input.scss

// ----
// libsass (v3.3.2)
// ----

@import "breakpoint";

$columns: 12;
$column-width: 1;
$gutter-width: 1/3;
$gutter-style: 'split';
$gutter-style: 'opposite';

$context: $columns * $column-width + ($columns - 1) * $gutter-width;

@if ($gutter-style == 'split') {
  $context: $context + $gutter-width;
}

@function span($column-count) { // $column-count == number of columns to span
  $column-total: $column-count * $column-width; // Width of all spanned columns
  $gutter-total: ($column-count - 1) * $gutter-width; // Add inner gutters to columns
  $span-total: $column-total + $gutter-total;
  $span-percentage: $span-total / $context * 100%;
  @return $span-percentage;
}

@function gutter-percentage() {
  @return $gutter-width / $context * 100%;
}

@mixin span($column-count) {
  float: left;
  width: span($column-count);
  margin-right: gutter-percentage();
}

#container {
  margin: 0 auto;
  max-width: 960px;
  height: 100vh;
  background: rgba(yellow, .25);
}

div div {
  height: 25vh;
}

.first {
  //@include grid-span(3, 1);
  @include span(3);
  @if $gutter-style == 'split' {
    margin-left: gutter-percentage() / 2;
  }
  background: rgba(red, .25);
}

.second {
  //@include grid-span(3, 4);
  @include span(3);
  background: rgba(blue, .25);
}

.third {
  //@include grid-span(3, 8);
  @include span(3);
  background: rgba(green, .25);
}

.fourth {
  @include span(3);
  margin-right: 0;
  background: rgba(black, .25);
}

SassMeister-output.css

#container {
  margin: 0 auto;
  max-width: 960px;
  height: 100vh;
  background: rgba(255, 255, 0, 0.25);
}

div div {
  height: 25vh;
}

.first {
  float: left;
  width: 23.40426%;
  margin-right: 2.12766%;
  background: rgba(255, 0, 0, 0.25);
}

.second {
  float: left;
  width: 23.40426%;
  margin-right: 2.12766%;
  background: rgba(0, 0, 255, 0.25);
}

.third {
  float: left;
  width: 23.40426%;
  margin-right: 2.12766%;
  background: rgba(0, 128, 0, 0.25);
}

.fourth {
  float: left;
  width: 23.40426%;
  margin-right: 2.12766%;
  margin-right: 0;
  background: rgba(0, 0, 0, 0.25);
}

SassMeister-rendered.html

<div id="container">
  <div class="first">First</div>
  <div class="second">Second</div>
  <div class="third">Third</div>
  <div class="fourth">Fourth</div>
</div>