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";

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

.container {
  background-color: #fbeecb;
}
$beige: #fbeecb; //background color
$blue: #71dad2;
$pink: #ee9e9c;
$orange: #f09671;
$yellow: #f6d784;

.common {
  @include border-radius;
  h2 {
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    padding-top: 1.8rem;
    padding-bottom: 1.8rem;
  }
}
.container {
@include container;
}

.ag1 {
@include span(2 of 10);
@extend .common;
background: $blue;
}

.ag2 {
 @include span(6 of 10);
 @extend .common;
 background: $pink;
 @include clearfix;
}

.ag3 {
@include span(2 of 10 last);
@extend .common;
background: $blue;
}

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

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

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

.ag7 {
@include span(4 of 6 last);
@extend .common;
background: lighten($orange, 5);
}

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

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

.ag10 {
@include span(full);
@extend .common;
background: darken($beige, 10);
clear: both;
}

SassMeister-output.css

/**
 * Styles for AG grids & Container
 */
.container {
  background-color: #fbeecb;
}

.common, .ag1, .ag2, .ag3, .ag4, .ag5, .ag6, .ag7, .ag8, .ag9, .ag10 {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.common h2, .ag1 h2, .ag2 h2, .ag3 h2, .ag4 h2, .ag5 h2, .ag6 h2, .ag7 h2, .ag8 h2, .ag9 h2, .ag10 h2 {
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  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: #71dad2;
}

.ag2 {
  width: 59.18367%;
  float: left;
  margin-right: 2.04082%;
  background: #ee9e9c;
  overflow: hidden;
  *zoom: 1;
}

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

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

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

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

.ag7 {
  width: 65.51724%;
  float: right;
  margin-right: 0;
  background: #f2a788;
}

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

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

.ag10 {
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
  background: #f7df9c;
  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 -->