dotemacs/index.html

## index.html
<html>
  <head>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <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 -->
  </body>
</html>

## main.scss
@import "susy/sass/susy";


@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

// Configuring Susy Defaults
$susy: (
  global-box-sizing: border-box,
  use-custom: (rem: true
    )
  );

@include border-box-sizing;

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

.container {
  background-color: #fbeecb;
}

.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;
}

.container {
  @include container;
	 // This is the default clearfix from Compass. You can opt to use other clearfix methods
  @include clearfix;
}

.ag1 {
  @include span(2 of 10);
}

.ag2 {
  @include span(6 of 10);
  @include clearfix;
}

.ag3 {
  @include span(2 of 10 last);
}

.ag4 {
  @include span(3 of 6);
}

.ag5 {
  @include span(3 of 6 last);
}

.ag6 {
  @include span(2 of 6);
}

.ag7 {
  @include span(4 of 6 last);
  //@include clearfix;
}

.ag8 {
  @include span(2 of 4);
}

.ag9 {
  @include span(2 of 4 last);
}

.ag10 {
  clear: both;
  // Alternatively, you can now use the span mixin with the full keyword to tell Susy this should be a 100% width
  // @include span(full);
}
	<html>
	<head>
	<link rel="stylesheet" href="main.css">
	</head>
	<body>
	<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 -->
	</body>
	</html>
	@import "susy/sass/susy";


	@mixin clearfix {
	&:after {
	content: "";
	display: table;
	clear: both;
	}
	}

	// Configuring Susy Defaults
	$susy: (
	global-box-sizing: border-box,
	use-custom: (rem: true
	)
	);

	@include border-box-sizing;

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

	.container {
	background-color: #fbeecb;
	}

	.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;
	}

	.container {
	@include container;
	// This is the default clearfix from Compass. You can opt to use other clearfix methods
	@include clearfix;
	}

	.ag1 {
	@include span(2 of 10);
	}

	.ag2 {
	@include span(6 of 10);
	@include clearfix;
	}

	.ag3 {
	@include span(2 of 10 last);
	}

	.ag4 {
	@include span(3 of 6);
	}

	.ag5 {
	@include span(3 of 6 last);
	}

	.ag6 {
	@include span(2 of 6);
	}

	.ag7 {
	@include span(4 of 6 last);
	//@include clearfix;
	}

	.ag8 {
	@include span(2 of 4);
	}

	.ag9 {
	@include span(2 of 4 last);
	}

	.ag10 {
	clear: both;
	// Alternatively, you can now use the span mixin with the full keyword to tell Susy this should be a 100% width
	// @include span(full);
	}