Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// Bourbon (v4.2.3)
// Neat (v1.6.0)
// ----

@import "bourbon/bourbon";
@import "neat/neat";

@mixin omega-reset($nth) {
  &:nth-child(#{$nth}) { margin-right: flex-gutter(); }
  &:nth-child(#{$nth}+1) { clear: none }
}

.grid-item {
  @include span-columns(6); // Two column grid
  @include omega(2n); // The omega mixin clears every 2nd grid item
  @media (min-width: 40em) {
    @include omega-reset(2n); // Since we're already clearing every second item, we have to undo that so our 3 column grid works.
    @include span-columns(4); // Three column grid
    @include omega(3n); // Clear every third grid item
  }
}

SassMeister-output.css

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.grid-item {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 48.82117%;
}
.grid-item:last-child {
  margin-right: 0;
}
.grid-item:nth-child(2n) {
  margin-right: 0;
}
.grid-item:nth-child(2n+1) {
  clear: left;
}
@media (min-width: 40em) {
  .grid-item {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 31.76157%;
  }
  .grid-item:nth-child(2n) {
    margin-right: 2.35765%;
  }
  .grid-item:nth-child(2n+1) {
    clear: none;
  }
  .grid-item:last-child {
    margin-right: 0;
  }
  .grid-item:nth-child(3n) {
    margin-right: 0;
  }
  .grid-item:nth-child(3n+1) {
    clear: left;
  }
}