Cacher is the code snippet organizer for pro developers

<div class="container">
  <aside>
    <h2>Sidebar</h2>
  </aside>

  <main>
    <h1>Main</h1>
    <div class="nested-item">
      I am a nested item
      <div class="test">test grid</div>
    </div>
  </main>
</div>

/* FLUID PERCENTAGES  */
.container {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 66.66667%, transparent 66.66667%);
  background-size: 8.57143%;
  background-origin: content-box;
  background-clip: content-box;
  background-position: left top;
}

.container:after {
  content: " ";
  display: block;
  clear: both;
}

main {
  width: 82.85714%;
  float: right;
  margin-right: 0;
  outline: 1px solid red;
  height: 1000px;
}

.nested-item {
  max-width: 100%;
  margin-left: 0;
  margin-right: auto;
  background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 66.66667%, transparent 66.66667%);
  background-size: 21.42857%;
  background-origin: content-box;
  background-clip: content-box;
  background-position: left top;
  outline: 1px solid orange;
}

.nested-item:after {
  content: " ";
  display: block;
  clear: both;
}

.test {
  width: 57.14286%;
  float: left;
  margin-right: 7.14286%;
  border: 1px solid black;
  margin: 20px 0;
}

aside {
  width: 14.28571%;
  float: left;
  margin-right: 2.85714%;
  height: 1000px;
  outline: 1px solid blue;
}

// ----
// libsass (v3.2.5)
// ----

@import "susy";
/* FLUID PERCENTAGES  */
$susy: (
  flow: ltr,
  math: fluid,
  output: float,
  gutter-position: after,
  container: 1140px,
  container-position: center,
  columns: 12,
  gutters: .5,
  debug: (
    image: show,
    color: rgba(#66f, .25),
    output: background,
    toggle: top right,
  )
);

$susy-inside: (
  flow: ltr,
  math: fluid,
  output: float,
  gutter-position: after,
  container: 100%,
  container-position: left,
  columns: 5,
  gutters: .5,
  debug: (
    image: show,
    color: rgba(red, .25),
    output: background,
    toggle: top right,
  )
);



.container {
  @include container;
}

main {
  @include span(10 of 12 last);
  outline: 1px solid red;
  height: 1000px;
}

.nested-item {
  // @include span(8 of 10);
  @include container($susy-inside);
  outline: 1px solid orange;
}

.test {
  @include span(3 of 5);
  border: 1px solid black;
  margin: 20px 0;
}

aside {
  @include span(2 of 12);
  //width: 220px;
  height: 1000px;
  outline: 1px solid blue;
}

<div class="container">
  <aside>
    <h2>Sidebar</h2>
  </aside>

  <main>
    <h1>Main</h1>
    <div class="nested-item">
      I am a nested item
      <div class="test">test grid</div>
    </div>
  </main>
</div>