Generated by SassMeister.com.

SassMeister-input-HTML.html

<section>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</section>

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

$grid-gutter: 1rem;
$grid-column-width: 5rem;
$grid-ratio: 1/5;
$grid-count: 12;

@mixin grid($span, $count, $gutter) {
  @if( length( $gutter ) == 0 ) {
      $gutter: 1;
  }

  $sum: 100 / $count;
  $sum-m: $sum * $grid-ratio;
  
  $fin-w: $sum - $sum-m;
  $fin-m: $sum-m / 2;
  
  
  box-sizing: border-box;
  display: inline-block;
  margin: {
    top: 0;
    right: $fin-m * 1%;
    left:  $fin-m * 1%;
    bottom: $grid-gutter;
  }
  padding: 0;
  width: $fin-w * 1%;
  
  &:nth-of-type(#{$count}n + 1) {
    background: #e74c3c;
    color: red;
    //margin-left: 0;
    position:relative;
    &:before { content: "alpha"; display: inline-block; position: absolute; color: red; }
  }
  
  &:nth-of-type(#{$count}n) {
    background: #2ecc71;
    //margin-right: 0;
  }
}


.item {
  background: #3498db;
  height: 175px;
  
  @include grid(1,4, default);
}


section {
  background: #34495e;
  font-size: 0; // Temp fix to get rid of white space
  padding: $grid-gutter *2 0;
  width: 1000px;
}

SassMeister-output.css

.item {
  background: #3498db;
  height: 175px;
  box-sizing: border-box;
  display: inline-block;
  margin-top: 0;
  margin-right: 2.5%;
  margin-left: 2.5%;
  margin-bottom: 1rem;
  padding: 0;
  width: 20%;
}
.item:nth-of-type(4n + 1) {
  background: #e74c3c;
  color: red;
  position: relative;
}
.item:nth-of-type(4n + 1):before {
  content: "alpha";
  display: inline-block;
  position: absolute;
  color: red;
}
.item:nth-of-type(4n) {
  background: #2ecc71;
}

section {
  background: #34495e;
  font-size: 0;
  padding: 2rem 0;
  width: 1000px;
}

SassMeister-rendered.html

<section>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</section>