Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container">
     <div class="test">hello</div>
     <div class="test2">hello</div>
     <div class="test">hello</div>
</div>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

@import 'susy';

$susy: (
  columns: 12,
  column-width: 5em,
);

$gutter: gutters(static);

@mixin calc-span($span) {
  $span: append($span, 'wide');
  float: left;
  width: calc(#{span($span)} - #{$gutter});
  margin-right: $gutter;
}

.container {
  @include container(show);
}

.test {
  @include calc-span(3);
  background: rgba(gray, .5);
}

.test2 {
  @include calc-span(4);
  background: rgba(gray, .5);
}

SassMeister-output.css

.container {
  max-width: 73.75em;
  margin-left: auto;
  margin-right: auto;
  background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 80%, transparent 80%);
  background-size: 8.47458%;
  background-origin: content-box;
  background-clip: content-box;
  background-position: left top;
}

.container:after {
  content: " ";
  display: block;
  clear: both;
}

.test {
  float: left;
  width: calc(25.42373% - 1.25em);
  margin-right: 1.25em;
  background: rgba(128, 128, 128, 0.5);
}

.test2 {
  float: left;
  width: calc(33.89831% - 1.25em);
  margin-right: 1.25em;
  background: rgba(128, 128, 128, 0.5);
}

SassMeister-rendered.html

<div class="container">
     <div class="test">hello</div>
     <div class="test2">hello</div>
     <div class="test">hello</div>
</div>