Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="grid"> 
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> 
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
</div>

<div class="grid"> 
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
</div>

<div class="grid"> 
<div class="col-md-6">.col-md-6</div> 
<div class="col-md-6">.col-md-6</div> 
</div>

SassMeister-input.scss

// ----
// libsass (v3.5.4)
// ----

.grid {
  display: grid;
  grid-template-columns: repeat(12,1fr);
  > * {
    // Default to full width
    grid-column-end: span 12;
  }
  > *:only-child {
    grid-column-end: span 12;
  }
  > [class*=field-type] {
    // Default grid for field types is span 4 of 12
    grid-column-end: span 4;
  }
  // Specific layouts should be honored
  @for $i from 1 to 13 {
    > .col-md-#{$i} {
      width: auto;
      margin-bottom: 0 !important;
      grid-column-end: span 12;
      @media screen and (min-width: 768px) {
        grid-column-end: span span if($i * 2 > 12, $i, $i * 2);
      }
      @media screen and (min-width: 1000px) {
        grid-column-end: span $i;
      }
      > * {
        height: 100%;
      }
    }
  }
}

.grid > * {
  background: #eee;
  padding: 5px;
  margin: 5px;
}

SassMeister-output.css

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.grid > * {
  grid-column-end: span 12;
}

.grid > *:only-child {
  grid-column-end: span 12;
}

.grid > [class*=field-type] {
  grid-column-end: span 4;
}

.grid > .col-md-1 {
  width: auto;
  margin-bottom: 0 !important;
  grid-column-end: span 12;
}

@media screen and (min-width: 768px) {
  .grid > .col-md-1 {
    grid-column-end: span span 2;
  }
}

@media screen and (min-width: 1000px) {
  .grid > .col-md-1 {
    grid-column-end: span 1;
  }
}

.grid > .col-md-1 > * {
  height: 100%;
}

.grid > .col-md-2 {
  width: auto;
  margin-bottom: 0 !important;
  grid-column-end: span 12;
}

@media screen and (min-width: 768px) {
  .grid > .col-md-2 {
    grid-column-end: span span 4;
  }
}

@media screen and (min-width: 1000px) {
  .grid > .col-md-2 {
    grid-column-end: span 2;
  }
}

.grid > .col-md-2 > * {
  height: 100%;
}

.grid > .col-md-3 {
  width: auto;
  margin-bottom: 0 !important;
  grid-column-end: span 12;
}

@media screen and (min-width: 768px) {
  .grid > .col-md-3 {
    grid-column-end: span span 6;
  }
}

@media screen and (min-width: 1000px) {
  .grid > .col-md-3 {
    grid-column-end: span 3;
  }
}

.grid > .col-md-3 > * {
  height: 100%;
}

.grid > .col-md-4 {
  width: auto;
  margin-bottom: 0 !important;
  grid-column-end: span 12;
}

@media screen and (min-width: 768px) {
  .grid > .col-md-4 {
    grid-column-end: span span 8;
  }
}

@media screen and (min-width: 1000px) {
  .grid > .col-md-4 {
    grid-column-end: span 4;
  }
}

.grid > .col-md-4 > * {
  height: 100%;
}

.grid > .col-md-5 {
  width: auto;
  margin-bottom: 0 !important;
  grid-column-end: span 12;
}

@media screen and (min-width: 768px) {
  .grid > .col-md-5 {
    grid-column-end: span span 10;
  }
}

@media screen and (min-width: 1000px) {
  .grid > .col-md-5 {
    grid-column-end: span 5;
  }
}

.grid > .col-md-5 > * {
  height: 100%;
}

.grid > .col-md-6 {
  width: auto;
  margin-bottom: 0 !important;
  grid-column-end: span 12;
}

@media screen and (min-width: 768px) {
  .grid > .col-md-6 {
    grid-column-end: span span 12;
  }
}

@media screen and (min-width: 1000px) {
  .grid > .col-md-6 {
    grid-column-end: span 6;
  }
}

.grid > .col-md-6 > * {
  height: 100%;
}

.grid > .col-md-7 {
  width: auto;
  margin-bottom: 0 !important;
  grid-column-end: span 12;
}

@media screen and (min-width: 768px) {
  .grid > .col-md-7 {
    grid-column-end: span span 7;
  }
}

@media screen and (min-width: 1000px) {
  .grid > .col-md-7 {
    grid-column-end: span 7;
  }
}

.grid > .col-md-7 > * {
  height: 100%;
}

.grid > .col-md-8 {
  width: auto;
  margin-bottom: 0 !important;
  grid-column-end: span 12;
}

@media screen and (min-width: 768px) {
  .grid > .col-md-8 {
    grid-column-end: span span 8;
  }
}

@media screen and (min-width: 1000px) {
  .grid > .col-md-8 {
    grid-column-end: span 8;
  }
}

.grid > .col-md-8 > * {
  height: 100%;
}

.grid > .col-md-9 {
  width: auto;
  margin-bottom: 0 !important;
  grid-column-end: span 12;
}

@media screen and (min-width: 768px) {
  .grid > .col-md-9 {
    grid-column-end: span span 9;
  }
}

@media screen and (min-width: 1000px) {
  .grid > .col-md-9 {
    grid-column-end: span 9;
  }
}

.grid > .col-md-9 > * {
  height: 100%;
}

.grid > .col-md-10 {
  width: auto;
  margin-bottom: 0 !important;
  grid-column-end: span 12;
}

@media screen and (min-width: 768px) {
  .grid > .col-md-10 {
    grid-column-end: span span 10;
  }
}

@media screen and (min-width: 1000px) {
  .grid > .col-md-10 {
    grid-column-end: span 10;
  }
}

.grid > .col-md-10 > * {
  height: 100%;
}

.grid > .col-md-11 {
  width: auto;
  margin-bottom: 0 !important;
  grid-column-end: span 12;
}

@media screen and (min-width: 768px) {
  .grid > .col-md-11 {
    grid-column-end: span span 11;
  }
}

@media screen and (min-width: 1000px) {
  .grid > .col-md-11 {
    grid-column-end: span 11;
  }
}

.grid > .col-md-11 > * {
  height: 100%;
}

.grid > .col-md-12 {
  width: auto;
  margin-bottom: 0 !important;
  grid-column-end: span 12;
}

@media screen and (min-width: 768px) {
  .grid > .col-md-12 {
    grid-column-end: span span 12;
  }
}

@media screen and (min-width: 1000px) {
  .grid > .col-md-12 {
    grid-column-end: span 12;
  }
}

.grid > .col-md-12 > * {
  height: 100%;
}

.grid > * {
  background: #eee;
  padding: 5px;
  margin: 5px;
}

SassMeister-rendered.html

<div class="grid"> 
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> 
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
</div>

<div class="grid"> 
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
</div>

<div class="grid"> 
<div class="col-md-6">.col-md-6</div> 
<div class="col-md-6">.col-md-6</div> 
</div>