Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container">
  <input type="checkbox" id="left" class="toggle-input show-left" />
  <input type="checkbox" id="right" class="toggle-input show-right" />
  <header>
    <label for="left" class="toggle">show-left</label>
    <label for="right" class="toggle">show-right</label>
    <h1>header</h1>
  </header>
  <div class="left" id="left">left</div>
  <div class="main">main</div>
  <div class="right" id="right">right</div>
 <footer>footer</footer>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// Breakpoint (v2.4.1)
// Susy (v2.0.0.beta.3)
// ----

@import "compass";
@import "compass/reset";
@import "susy";
@import "breakpoint";


// Small
// -----

$susy: (
  columns: 4,
  column-width: 4em,
  gutter-position: inside,
);

$medium: layout(8);
$large: layout(12);

.container {
  @include container($large);
  overflow: hidden;
}

.left { @include span(3 at span(-3 wide) isolate); }
.main { @include span(full at 1 isolate); }
.right {
  @include span(3 at 100% isolate);
  margin-right: -200%;
}

.show-left {
  &:checked {
    ~ .left { @include push(0); }
    ~ .main { @include push(3); }
  }
}

.show-right {
  &:checked {
    ~ .left { @include pull(6); }
    ~ .main { @include pull(3); }
    ~ .right { @include push(1); }
  }
}


// Medium
// ------

@include susy-breakpoint(40em, $medium) {
  .left { @include span(3 at 1 isolate); }
  .main { @include span(5 at 4 isolate); }

  .show-left {
    &:checked {
      ~ .left { @include push(0); }
      ~ .main { @include push(3); }
    }
  }

  .show-right {
    &:checked {
      ~ .left { @include pull(3); }
      ~ .main { @include push(0); }
      ~ .right { @include push(5); }
    }
  }

  [for="left"] { display: none; }
}


// Large
// ------

@include susy-breakpoint(60em, $large) {
  .left { @include span(3 at 1 isolate); }
  .main { @include span(6 at 4 isolate); }
  .right { @include span(3 at 10 isolate); }

  .show-left {
    &:checked {
      ~ .main { @include push(3); }
    }
  }

  .show-right {
    &:checked {
      ~ .left { @include push(0); }
      ~ .main { @include push(3); }
      ~ .right { @include push(9); }
    }
  }

  [for="right"] { display: none; }
}


// Styles
// ------

.toggle-input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.toggle {
  cursor: pointer;
  color: blue;
  &:hover, &:focus, &:active {
    color: red;
  }
}

header, footer {
  padding: 1em 0;
  background-color: rgba(gray, .25);
  text-align: center;
}

[for] {
  position: relative;
  z-index: 10;
  padding: 0 1em;
}

[for="left"] { float: left; }
[for="right"] { float: right; }

.left, .main, .right {
  @include transition(all 300ms);
  padding-top: 1em;
  padding-bottom: 1em;
  height: 12em;
}

.left {
  background: rgba(red, .25);
}

.right {
  background: rgba(yellow, .5);
}

footer {
  @include break;
}

SassMeister-output.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

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

.left {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 75%;
  float: left;
  margin-left: -75%;
  margin-right: -100%;
  padding-left: 2.5%;
  padding-right: 2.5%;
}

.main {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: -100%;
  padding-left: 2.5%;
  padding-right: 2.5%;
}

.right {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 75%;
  float: left;
  margin-left: 100%;
  margin-right: -100%;
  padding-left: 2.5%;
  padding-right: 2.5%;
  margin-right: -200%;
}

.show-left:checked ~ .left {
  margin-left: 0%;
}
.show-left:checked ~ .main {
  margin-left: 75%;
}

.show-right:checked ~ .left {
  margin-left: -150%;
}
.show-right:checked ~ .main {
  margin-left: -75%;
}
.show-right:checked ~ .right {
  margin-left: 25%;
}

@media (min-width: 40em) {
  .left {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 37.5%;
    float: left;
    margin-left: 0;
    margin-right: -100%;
    padding-left: 1.25%;
    padding-right: 1.25%;
  }

  .main {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 62.5%;
    float: left;
    margin-left: 37.5%;
    margin-right: -100%;
    padding-left: 1.25%;
    padding-right: 1.25%;
  }

  .show-left:checked ~ .left {
    margin-left: 0%;
  }
  .show-left:checked ~ .main {
    margin-left: 37.5%;
  }

  .show-right:checked ~ .left {
    margin-left: -37.5%;
  }
  .show-right:checked ~ .main {
    margin-left: 0%;
  }
  .show-right:checked ~ .right {
    margin-left: 62.5%;
  }

  [for="left"] {
    display: none;
  }
}
@media (min-width: 60em) {
  .left {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 25%;
    float: left;
    margin-left: 0;
    margin-right: -100%;
    padding-left: 0.83333%;
    padding-right: 0.83333%;
  }

  .main {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 50%;
    float: left;
    margin-left: 25%;
    margin-right: -100%;
    padding-left: 0.83333%;
    padding-right: 0.83333%;
  }

  .right {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 25%;
    float: left;
    margin-left: 75%;
    margin-right: -100%;
    padding-left: 0.83333%;
    padding-right: 0.83333%;
  }

  .show-left:checked ~ .main {
    margin-left: 25%;
  }

  .show-right:checked ~ .left {
    margin-left: 0%;
  }
  .show-right:checked ~ .main {
    margin-left: 25%;
  }
  .show-right:checked ~ .right {
    margin-left: 75%;
  }

  [for="right"] {
    display: none;
  }
}
.toggle-input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

.toggle {
  cursor: pointer;
  color: blue;
}
.toggle:hover, .toggle:focus, .toggle:active {
  color: red;
}

header, footer {
  padding: 1em 0;
  background-color: rgba(128, 128, 128, 0.25);
  text-align: center;
}

[for] {
  position: relative;
  z-index: 10;
  padding: 0 1em;
}

[for="left"] {
  float: left;
}

[for="right"] {
  float: right;
}

.left, .main, .right {
  -moz-transition: all 300ms;
  -o-transition: all 300ms;
  -webkit-transition: all 300ms;
  transition: all 300ms;
  padding-top: 1em;
  padding-bottom: 1em;
  height: 12em;
}

.left {
  background: rgba(255, 0, 0, 0.25);
}

.right {
  background: rgba(255, 255, 0, 0.5);
}

footer {
  clear: both;
}

SassMeister-rendered.html

<div class="container">
  <input type="checkbox" id="left" class="toggle-input show-left" />
  <input type="checkbox" id="right" class="toggle-input show-right" />
  <header>
    <label for="left" class="toggle">show-left</label>
    <label for="right" class="toggle">show-right</label>
    <h1>header</h1>
  </header>
  <div class="left" id="left">left</div>
  <div class="main">main</div>
  <div class="right" id="right">right</div>
 <footer>footer</footer>
</div>