Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="grid12">
    <div class="grid6">
        <div>col1</div>
    </div>
    <div class="grid6">
        <div>col2</div>
    </div>
</div>

<div class="grid6">col6</div>
<div class="grid6">col6</div>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
@import "singularitygs";

$grids: 12;
$gutters: 12px;
$gutter-styles: 'split' 'fixed';
$output: 'float';

@for $i from 1 through $grids {
  .grid#{$i} { 
    @include grid-span($i);
    
    min-height: 50px;
    border: 1px solid red;
  }
}

.grid12 {
    .grid6 div {
        background-color: green;
    }
}

SassMeister-output.css

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

.grid1 {
  width: 8.33333%;
  clear: right;
  float: left;
  padding-left: 6px;
  padding-right: 6px;
  min-height: 50px;
  border: 1px solid red;
}

.grid2 {
  width: 16.66667%;
  clear: right;
  float: left;
  padding-left: 6px;
  padding-right: 6px;
  min-height: 50px;
  border: 1px solid red;
}

.grid3 {
  width: 25%;
  clear: right;
  float: left;
  padding-left: 6px;
  padding-right: 6px;
  min-height: 50px;
  border: 1px solid red;
}

.grid4 {
  width: 33.33333%;
  clear: right;
  float: left;
  padding-left: 6px;
  padding-right: 6px;
  min-height: 50px;
  border: 1px solid red;
}

.grid5 {
  width: 41.66667%;
  clear: right;
  float: left;
  padding-left: 6px;
  padding-right: 6px;
  min-height: 50px;
  border: 1px solid red;
}

.grid6 {
  width: 50%;
  clear: right;
  float: left;
  padding-left: 6px;
  padding-right: 6px;
  min-height: 50px;
  border: 1px solid red;
}

.grid7 {
  width: 58.33333%;
  clear: right;
  float: left;
  padding-left: 6px;
  padding-right: 6px;
  min-height: 50px;
  border: 1px solid red;
}

.grid8 {
  width: 66.66667%;
  clear: right;
  float: left;
  padding-left: 6px;
  padding-right: 6px;
  min-height: 50px;
  border: 1px solid red;
}

.grid9 {
  width: 75%;
  clear: right;
  float: left;
  padding-left: 6px;
  padding-right: 6px;
  min-height: 50px;
  border: 1px solid red;
}

.grid10 {
  width: 83.33333%;
  clear: right;
  float: left;
  padding-left: 6px;
  padding-right: 6px;
  min-height: 50px;
  border: 1px solid red;
}

.grid11 {
  width: 91.66667%;
  clear: right;
  float: left;
  padding-left: 6px;
  padding-right: 6px;
  min-height: 50px;
  border: 1px solid red;
}

.grid12 {
  width: 100%;
  clear: right;
  float: right;
  padding-left: 6px;
  padding-right: 6px;
  min-height: 50px;
  border: 1px solid red;
}

.grid12 .grid6 div {
  background-color: green;
}

SassMeister-rendered.html

<div class="grid12">
    <div class="grid6">
        <div>col1</div>
    </div>
    <div class="grid6">
        <div>col2</div>
    </div>
</div>

<div class="grid6">col6</div>
<div class="grid6">col6</div>