Generated by SassMeister.com.

SassMeister-input-HTML.html

<!-- source:http://www.zell-weekeat.com/susy2-tutorial/ -->
<div class="container">
<h1>The 10 column complex nested grid AG test</h1>

<div class="ag ag1">
  <h2>AG 1</h2>
</div>
<!-- /ag1 -->

<!-- ag4 to ag7 are nested within ag2.-->
<div class="ag ag2">
  <h2>AG 2</h2>
  <div class="ag ag4">
    <h2>AG 4</h2>
  </div>
  <div class="ag ag5">
    <h2>AG 5</h2>
  </div>
  <div class="ag ag6">
    <h2>AG 6</h2>
  </div>

  <!-- ag8, ag9 and ag10 are nested within ag7 -->
  <div class="ag ag7">
    <h2>AG 7</h2>
    <div class="ag ag8">
      <h2>AG 8</h2>
    </div>
    <div class="ag ag9">
      <h2>AG 9</h2>
    </div>
    <div class="ag ag10">
      <h2>AG 10</h2>
    </div>
  </div>
  <!-- /ag7 -->
</div>
<!-- /ag2 -->

<div class="ag ag3">
  <h2>AG 3</h2>
</div>
<!-- /ag3 -->

</div>
<!-- /container -->

SassMeister-input.scss

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// Susy (v2.1.3)
// ----

@import "compass";
@import "susy";

$green: #2ecc71;
$red: #e74c3c;
$orange: #f39c12;
$blue: #3498db;

.common {
 @include border-radius;
 background: #eee;
 text-align: center;
 font-size: 1rem;
 font-weight: normal;
 padding-top: 1.8rem;
 padding-bottom: 1.8rem;
}
.container {
@include container;
}

.ag1 {
@include span(2 of 10);
background: lighten($green, 20);
@extend .common;
}

.ag2 {
 @include span(6 of 10);
 background: lighten($red, 20);
 @extend .common;
 @include pie-clearfix;
}

.ag3 {
@include span(2 of 10 last);
background: lighten($green, 20);
@extend .common;
}

.ag4 {
@include span(3 of 6);
background: lighten($red, 30);
@extend .common;
}

.ag5 {
@include span(3 of 6 last);
background: lighten($red, 30);
@extend .common;
}

.ag6 {
@include span(2 of 6);
background: lighten($red, 30);
@extend .common;
}

.ag7 {
@include span(4 of 6 last);
background: lighten($blue, 20);
@extend .common;
@include pie-clearfix;
}

.ag8 {
@include span(2 of 4);
background: lighten($blue, 30);
@extend .common;
}

.ag9 {
@include span(2 of 4 last);
background: lighten($blue, 30);
@extend .common;
}

.ag10 {
background: lighten($blue, 30);
@include span(full);
@extend .common;
clear: both;
}

SassMeister-output.css

.common, .ag1, .ag2, .ag3, .ag4, .ag5, .ag6, .ag7, .ag8, .ag9, .ag10 {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background: #eee;
  text-align: center;
  font-size: 1rem;
  font-weight: normal;
  padding-top: 1.8rem;
  padding-bottom: 1.8rem;
}

.container {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.container:after {
  content: " ";
  display: block;
  clear: both;
}

.ag1 {
  width: 18.36735%;
  float: left;
  margin-right: 2.04082%;
  background: #7ee2a8;
}

.ag2 {
  width: 59.18367%;
  float: left;
  margin-right: 2.04082%;
  background: #f29f97;
  *zoom: 1;
}
.ag2:after {
  content: "";
  display: table;
  clear: both;
}

.ag3 {
  width: 18.36735%;
  float: right;
  margin-right: 0;
  background: #7ee2a8;
}

.ag4 {
  width: 48.27586%;
  float: left;
  margin-right: 3.44828%;
  background: #f8c9c4;
}

.ag5 {
  width: 48.27586%;
  float: right;
  margin-right: 0;
  background: #f8c9c4;
}

.ag6 {
  width: 31.03448%;
  float: left;
  margin-right: 3.44828%;
  background: #f8c9c4;
}

.ag7 {
  width: 65.51724%;
  float: right;
  margin-right: 0;
  background: #8bc4ea;
  *zoom: 1;
}
.ag7:after {
  content: "";
  display: table;
  clear: both;
}

.ag8 {
  width: 47.36842%;
  float: left;
  margin-right: 5.26316%;
  background: #b6daf2;
}

.ag9 {
  width: 47.36842%;
  float: right;
  margin-right: 0;
  background: #b6daf2;
}

.ag10 {
  background: #b6daf2;
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
  clear: both;
}

SassMeister-rendered.html

<!-- source:http://www.zell-weekeat.com/susy2-tutorial/ -->
<div class="container">
<h1>The 10 column complex nested grid AG test</h1>

<div class="ag ag1">
  <h2>AG 1</h2>
</div>
<!-- /ag1 -->

<!-- ag4 to ag7 are nested within ag2.-->
<div class="ag ag2">
  <h2>AG 2</h2>
  <div class="ag ag4">
    <h2>AG 4</h2>
  </div>
  <div class="ag ag5">
    <h2>AG 5</h2>
  </div>
  <div class="ag ag6">
    <h2>AG 6</h2>
  </div>

  <!-- ag8, ag9 and ag10 are nested within ag7 -->
  <div class="ag ag7">
    <h2>AG 7</h2>
    <div class="ag ag8">
      <h2>AG 8</h2>
    </div>
    <div class="ag ag9">
      <h2>AG 9</h2>
    </div>
    <div class="ag ag10">
      <h2>AG 10</h2>
    </div>
  </div>
  <!-- /ag7 -->
</div>
<!-- /ag2 -->

<div class="ag ag3">
  <h2>AG 3</h2>
</div>
<!-- /ag3 -->

</div>
<!-- /container -->