Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class='cool-site'>
<div class='product-list'>
  <div class='product'>Lorem</div>
  <div class='ad'>Cool Ad</div>
  <div class='product'>Dalor</div>
  <div class='product'>Sit</div>
  <div class='product'>Amet</div>
  <div class='product'>Hanky</div>
</div>
<aside>
  Some stuff you dont really care about.
</aside>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// Bourbon (v4.0.2)
// Neat (v1.6.0)
// ----

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

.cool-site{
  @include outer-container;
}

.product-list{
  @include span-columns(8 of 12);
  .product, .ad{
    @include span-columns(2 of 8);
    @include omega(3n);
    border: 1px solid blue;
  }
  .ad{
    @include span-columns(4 of 8);
  }
}
aside{
  @include span-columns(4 of 12);
}

SassMeister-output.css

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

.cool-site {
  max-width: 68em;
  margin-left: auto;
  margin-right: auto;
}
.cool-site:after {
  content: "";
  display: table;
  clear: both;
}

.product-list {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 65.88078%;
}
.product-list:last-child {
  margin-right: 0;
}
.product-list .product, .product-list .ad {
  float: left;
  display: block;
  margin-right: 3.57866%;
  width: 22.316%;
  border: 1px solid blue;
}
.product-list .product:last-child, .product-list .ad:last-child {
  margin-right: 0;
}
.product-list .product:nth-child(3n), .product-list .ad:nth-child(3n) {
  margin-right: 0;
}
.product-list .product:nth-child(3n+1), .product-list .ad:nth-child(3n+1) {
  clear: left;
}
.product-list .ad {
  float: left;
  display: block;
  margin-right: 3.57866%;
  width: 48.21067%;
}
.product-list .ad:last-child {
  margin-right: 0;
}

aside {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 31.76157%;
}
aside:last-child {
  margin-right: 0;
}

SassMeister-rendered.html

<div class='cool-site'>
<div class='product-list'>
  <div class='product'>Lorem</div>
  <div class='ad'>Cool Ad</div>
  <div class='product'>Dalor</div>
  <div class='product'>Sit</div>
  <div class='product'>Amet</div>
  <div class='product'>Hanky</div>
</div>
<aside>
  Some stuff you dont really care about.
</aside>
</div>