Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container">
<h1>The 10 column complex nested grid AG test</h1>

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

<!-- ag3 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

// ----
// libsass (v0.7.0)
// ----

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


// Configuring Susy defaults
// Susy accepts px, em and rem for the magic and fixed grid, and % for the fluid grid
$total-columns: 10;
$column-width: 4rem;
$gutter-width: 1rem;    
$grid-padding: $gutter-width / 2; 

$container-style: magic; // default to magic. Switch to fluid or fixed if desired
.container {
  @include border-box-sizing;
}

/**
 * Styles for AG grids & Container
 */

.container {
  background-color: #fbeecb;
  @include container;
  overflow:hidden;
}


.ag1 {
  @include span-columns(2);
}

.ag2 {
  @include span-columns(6);
  // Optionally, you can choose to include the context.
  overflow: hidden; 
}
.ag3 {
  @include span-columns(2 omega);
  // The omega flag is set here to tell Susy that ag3 is the final column. 
}

.ag4 {
  // Specifying the context with 6
  @include span-columns(3, 6);
}

.ag5 {
  // Additionally, adding omega to signify the last column
  @include span-columns(3 omega, 6);
}

.ag6 {
  @include span-columns(2, 6);
}

.ag7 {
  @include span-columns(4 omega, 6);
}

.ag7 {
  overflow: hidden;
}

.ag8 {
  @include span-columns(2, 4);
}

.ag9 {
  @include span-columns(2 omega, 4);
}

.ag10 {
  // There is no need to use span columns on AG 10 since elements take up 100% of the space by default in display block. In this case, we just have to make sure to clear the floats from ag8 and ag9. 
  clear: both;


}



.ag1, .ag3 {
  background-color: #71dad2;
}

.ag2 {
  background-color: #fae7b3;
}

.ag4,.ag5,.ag8,.ag9 {
  background-color: #ee9e9c;
}

.ag6 {
  background-color: #f09671;
}

.ag7 {
  background-color: #f6d784;
}

.ag10 {
  background-color: #ea9fc3;
}

/**
 * Text Styles
 */
h2 {
  text-align: center;
  font-size: 1rem;
  font-weight: normal;
  padding-top: 1.8rem;
  padding-bottom: 1.8rem;
}@import "susy";

SassMeister-output.css

source string:1: error: file to import not found or unreadable: "compass"

SassMeister-rendered.html

<div class="container">
<h1>The 10 column complex nested grid AG test</h1>

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

<!-- ag3 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 -->