Generated by SassMeister.com.

SassMeister-input-HTML.html

<main class="container">
  <div class="header">This is my Header</div>
  <div class="content">This is my content</div>
  <div class="first-sidebar">First Sidebar</div>
  <div class="second-sidebar">Second Sidebar</div>
  <div class="footer">This is my Footer</div>
</main>

SassMeister-input.scss

// ----
// Sass (v3.4.6)
// Compass (v1.0.1)
// Singularity Extras (v1.0.0)
// ----

@import "singularitygs";
@import "singularity-extras";

@include add-grid(160px 1 300px);
@include add-gutter(1em);
@include sgs-change('output', 'calc');

body {
  margin: 0;
  padding: 0;
}

div {
  height: 60vh;
}

.header {
  height: 20vh;
  background: yellow;
  @include grid-span(2, 1);
}

.footer {
  height: 20vh;
  background: orange;
  @include grid-span(2, 2);
}

.container {
  max-width: 1280px;
  margin: 0 auto;
}

.content {
  @include grid-span(1, 2);
  background: red;
  clear: both;
}

.first-sidebar {
  @include grid-span(1, 1);
  background: green;
}

.second-sidebar {
  @include grid-span(1, 3);
  background: blue;
}

SassMeister-output.css

body {
  margin: 0;
  padding: 0;
}

div {
  height: 60vh;
}

.header {
  height: 20vh;
  background: yellow;
  min-width: -webkit-calc((160px + 1em - 1em));
  min-width: calc((160px + 1em - 1em));
  width: -webkit-calc((160px + 1em) + (((100% - (460px + 2em)) / (1)) * 1));
  width: calc((160px + 1em) + (((100% - (460px + 2em)) / (1)) * 1));
  float: left;
  margin-right: -100%;
  margin-left: 0;
}

.footer {
  height: 20vh;
  background: orange;
  min-width: -webkit-calc((300px + 1em - 1em));
  min-width: calc((300px + 1em - 1em));
  width: -webkit-calc((((100% - (460px + 2em)) / (1)) * 1 + 1em) + (300px));
  width: calc((((100% - (460px + 2em)) / (1)) * 1 + 1em) + (300px));
  float: right;
  margin-left: 0;
  margin-right: 0;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
}

.content {
  width: -webkit-calc((((100% - (460px + 2em)) / (1))) * 1);
  width: calc((((100% - (460px + 2em)) / (1))) * 1);
  float: left;
  margin-right: -100%;
  margin-left: -webkit-calc((160px + 1em));
  margin-left: calc((160px + 1em));
  background: red;
  clear: both;
}

.first-sidebar {
  width: 160px;
  float: left;
  margin-right: -100%;
  margin-left: 0;
  background: green;
}

.second-sidebar {
  width: 300px;
  float: right;
  margin-left: 0;
  margin-right: 0;
  background: blue;
}

SassMeister-rendered.html

<main class="container">
  <div class="header">This is my Header</div>
  <div class="content">This is my content</div>
  <div class="first-sidebar">First Sidebar</div>
  <div class="second-sidebar">Second Sidebar</div>
  <div class="footer">This is my Footer</div>
</main>