Generated by SassMeister.com.

SassMeister-input-HTML.html

<main class="alpha">
  <div class="one"><span>1</span></div>
  <div class="two"><span>2</span></div>
  <div class="three"><span>3</span></div>
  <div class="four"><span>4</span></div>
</main>
<main class="beta">
  <div class="one"><span>1</span></div>
  <div class="two"><span>2</span></div>
  <div class="three"><span>3</span></div>
  <div class="four"><span>4</span></div>
  <div class="three"><span>5</span></div>
  <div class="four"><span>6</span></div>
</main>

SassMeister-input.scss

// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// Susy (v2.1.2)
// ----

@import "susy";
$column-width: 120px;

$susy: (
  gutter-position: inside-static,
  container: 100%,
  columns: 4,
  column-width: $column-width,
  gutter: 15px/$column-width,
  debug: (
    image: show,
  ),
);

$alternate: (
  gutter-position: inside-static,
  container: 100%,
  columns: 6,
  column-width: $column-width,
  gutter: 15px/$column-width,
  debug: (
    image: show,
  ),
);

span {
  display: block;
  background: yellow;
}

@include border-box-sizing;

.alpha {
  @include container();
  div { @include span(1); }
}

@include with-layout($alternate, true){
  .beta
  {
    @include container();
    div { @include span(1); }
  }
}

SassMeister-output.css

span {
  display: block;
  background: yellow;
}

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.alpha {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25));
  background-size: 25%;
  background-origin: content-box;
  background-clip: content-box;
  background-position: left top;
}
.alpha:after {
  content: " ";
  display: block;
  clear: both;
}
.alpha div {
  width: 25%;
  float: left;
  padding-left: 15px;
  padding-right: 15px;
}

.beta {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25));
  background-size: 16.66667%;
  background-origin: content-box;
  background-clip: content-box;
  background-position: left top;
}
.beta:after {
  content: " ";
  display: block;
  clear: both;
}
.beta div {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 16.66667%;
  float: left;
  padding-left: 15px;
  padding-right: 15px;
}

SassMeister-rendered.html

<main class="alpha">
  <div class="one"><span>1</span></div>
  <div class="two"><span>2</span></div>
  <div class="three"><span>3</span></div>
  <div class="four"><span>4</span></div>
</main>
<main class="beta">
  <div class="one"><span>1</span></div>
  <div class="two"><span>2</span></div>
  <div class="three"><span>3</span></div>
  <div class="four"><span>4</span></div>
  <div class="three"><span>5</span></div>
  <div class="four"><span>6</span></div>
</main>