Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="o-grid">
  <div class="lg-6">
    [content goes here]
  </div>
  <div class="lg-6">
    [content goes here]
  </div>
</div>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

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

$small: min-width 0;
$medium: min-width 640px;
$large: min-width 1024px;

@mixin grid-class-small($from, $to) {
  @for $i from $from through $to {
    .sm-#{$i} {
      @include media($small){
       @include span-columns($i); 
      }
    }
  }
}

@mixin grid-class-medium($from, $to) {
 @for $i from $from through $to {
   .md-#{$i} {
      @include media($medium){
        @include span-columns($i); 
      }
    }
  }
}

@mixin grid-class-large($from, $to) {
  @for $i from $from through $to {
    .lg-#{$i} {
      @include media($large){
        @include span-columns($i); 
      }
    }
  }
}
@include grid-class-small(1, 12);
@include grid-class-medium(1, 12);
@include grid-class-large(1, 12);

.o-grid { @include outer-container; }

.sm-12, .lg-6 {background: green;  }

SassMeister-output.css

html {
  box-sizing: border-box;
}

*,
*::after,
*::before {
  box-sizing: inherit;
}

@media screen and (min-width: 0) {
  .sm-1 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 6.17215%;
  }
  .sm-1:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 0) {
  .sm-2 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 14.70196%;
  }
  .sm-2:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 0) {
  .sm-3 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 23.23176%;
  }
  .sm-3:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 0) {
  .sm-4 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 31.76157%;
  }
  .sm-4:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 0) {
  .sm-5 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 40.29137%;
  }
  .sm-5:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 0) {
  .sm-6 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 48.82117%;
  }
  .sm-6:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 0) {
  .sm-7 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 57.35098%;
  }
  .sm-7:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 0) {
  .sm-8 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 65.88078%;
  }
  .sm-8:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 0) {
  .sm-9 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 74.41059%;
  }
  .sm-9:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 0) {
  .sm-10 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 82.94039%;
  }
  .sm-10:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 0) {
  .sm-11 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 91.4702%;
  }
  .sm-11:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 0) {
  .sm-12 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 100%;
  }
  .sm-12:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 640px) {
  .md-1 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 6.17215%;
  }
  .md-1:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 640px) {
  .md-2 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 14.70196%;
  }
  .md-2:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 640px) {
  .md-3 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 23.23176%;
  }
  .md-3:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 640px) {
  .md-4 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 31.76157%;
  }
  .md-4:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 640px) {
  .md-5 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 40.29137%;
  }
  .md-5:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 640px) {
  .md-6 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 48.82117%;
  }
  .md-6:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 640px) {
  .md-7 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 57.35098%;
  }
  .md-7:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 640px) {
  .md-8 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 65.88078%;
  }
  .md-8:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 640px) {
  .md-9 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 74.41059%;
  }
  .md-9:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 640px) {
  .md-10 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 82.94039%;
  }
  .md-10:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 640px) {
  .md-11 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 91.4702%;
  }
  .md-11:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 640px) {
  .md-12 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 100%;
  }
  .md-12:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 1024px) {
  .lg-1 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 6.17215%;
  }
  .lg-1:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 1024px) {
  .lg-2 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 14.70196%;
  }
  .lg-2:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 1024px) {
  .lg-3 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 23.23176%;
  }
  .lg-3:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 1024px) {
  .lg-4 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 31.76157%;
  }
  .lg-4:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 1024px) {
  .lg-5 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 40.29137%;
  }
  .lg-5:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 1024px) {
  .lg-6 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 48.82117%;
  }
  .lg-6:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 1024px) {
  .lg-7 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 57.35098%;
  }
  .lg-7:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 1024px) {
  .lg-8 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 65.88078%;
  }
  .lg-8:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 1024px) {
  .lg-9 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 74.41059%;
  }
  .lg-9:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 1024px) {
  .lg-10 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 82.94039%;
  }
  .lg-10:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 1024px) {
  .lg-11 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 91.4702%;
  }
  .lg-11:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 1024px) {
  .lg-12 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 100%;
  }
  .lg-12:last-child {
    margin-right: 0;
  }
}

.o-grid {
  max-width: 68em;
  margin-left: auto;
  margin-right: auto;
}

.o-grid::after {
  clear: both;
  content: "";
  display: table;
}

.sm-12, .lg-6 {
  background: green;
}

SassMeister-rendered.html

<div class="o-grid">
  <div class="lg-6">
    [content goes here]
  </div>
  <div class="lg-6">
    [content goes here]
  </div>
</div>