Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container">
  <div class="content" role="main">
    <h1>This is the heading</h1>
  </div>
  <aside class="sidebar">
    <p>This is the sidebar</p>
  </aside>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.0)
// Susy (v2.1.3)
// ----

* {
  box-sizing: border-box;
}

@import "susy";

.container {
  @include container(60em);
}

.content {
  @include span(8 of 12);
}

.sidebar {
  @include span(4 of 12 omega);
}

SassMeister-output.css

* {
  box-sizing: border-box; }

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

.content {
  width: 66.10169%;
  float: left;
  margin-right: 1.69492%; }

.sidebar {
  width: 32.20339%;
  float: right;
  margin-right: 0; }

SassMeister-rendered.html

<div class="container">
  <div class="content" role="main">
    <h1>This is the heading</h1>
  </div>
  <aside class="sidebar">
    <p>This is the sidebar</p>
  </aside>
</div>