Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="canvas">
<input type="checkbox" id="toggle-nav" class="toggle-nav" />

<nav class="off-canvas">
  <h2>Navigation</h2>
  <label for="toggle-nav">Toggle Nav</label>
  <ul>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
  </ul>
</nav>

<main class="main">
  <h2>Main</h2>
  <label for="toggle-nav">Toggle Nav</label>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    In, possimus, soluta et natus nemo animi quis quidem perspiciatis
    iure perferendis architecto maiores itaque voluptatibus culpa dolor
    cumque praesentium doloremque labore!
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    In, possimus, soluta et natus nemo animi quis quidem perspiciatis
    iure perferendis architecto maiores itaque voluptatibus culpa dolor
    cumque praesentium doloremque labore!
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    In, possimus, soluta et natus nemo animi quis quidem perspiciatis
    iure perferendis architecto maiores itaque voluptatibus culpa dolor
    cumque praesentium doloremque labore!
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    In, possimus, soluta et natus nemo animi quis quidem perspiciatis
    iure perferendis architecto maiores itaque voluptatibus culpa dolor
    cumque praesentium doloremque labore!
  </p>
</main>

</div>

SassMeister-input.scss

// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// Breakpoint (v2.4.2)
// Susy (v2.1.2)
// ----

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

// Setup
// -----

$susy: layout(6 (4rem 1rem) inside-static);

@import "compass/reset";
@include establish-baseline;
@include border-box-sizing;

@mixin is-hidden {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

@mixin is-checked {
  &:checked { @content; }
}

@mixin is-toggle {
  @include is-hidden;
  @include is-checked { @content; }
}

html, body {
  height: 100%;
}

// Off-Canvas Pattern
// ------------------

$off-canvas: (
  drawer: '.off-canvas',
  pusher: '~ .main',
  push: span(-3 static),
);

@mixin off-canvas(
  $off-canvas: $off-canvas
) {
  @at-root #{map-get($off-canvas, drawer)} {
    width: abs(map-get($off-canvas, push));
  }
  
  @include is-toggle {
    #{map-get($off-canvas, pusher)} {
      @include translate3d(map-get($off-canvas, push), 0, 0);
    }
    @content;
  }
}

// Render Off-Canvas
// -----------------

.toggle-nav {
  @include off-canvas {
    ~ .off-canvas {
      @include scale3d(1, 1, 1);
    }
  }
}

// Extra Styles
// ------------

.canvas {
  @include container;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.off-canvas {
  @include scale3d(.95, .95, .95);
  @include stretch-y;
  @include transition(all 300ms ease);
  background: #ccc;
  right: 0;
  overflow: auto;
}

.main {
  @include transition(all 300ms ease);
  background: white;
  height: 100%;
  overflow: auto;
  position: relative;
}

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

html {
  font-size: 100%;
  line-height: 1.5em;
}

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

.toggle-nav {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}
.off-canvas {
  width: 15rem;
}
.toggle-nav:checked ~ .main {
  -moz-transform: translate3d(-15rem, 0, 0);
  -webkit-transform: translate3d(-15rem, 0, 0);
  transform: translate3d(-15rem, 0, 0);
}
.toggle-nav:checked ~ .off-canvas {
  -moz-transform: scale3d(1, 1, 1);
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}

.canvas {
  max-width: 30rem;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.canvas:after {
  content: " ";
  display: block;
  clear: both;
}

.off-canvas {
  -moz-transform: scale3d(0.95, 0.95, 0.95);
  -webkit-transform: scale3d(0.95, 0.95, 0.95);
  transform: scale3d(0.95, 0.95, 0.95);
  position: absolute;
  top: 0;
  bottom: 0;
  -moz-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
  background: #ccc;
  right: 0;
  overflow: auto;
}

.main {
  -moz-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
  background: white;
  height: 100%;
  overflow: auto;
  position: relative;
}

SassMeister-rendered.html

<div class="canvas">
<input type="checkbox" id="toggle-nav" class="toggle-nav" />

<nav class="off-canvas">
  <h2>Navigation</h2>
  <label for="toggle-nav">Toggle Nav</label>
  <ul>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
  </ul>
</nav>

<main class="main">
  <h2>Main</h2>
  <label for="toggle-nav">Toggle Nav</label>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    In, possimus, soluta et natus nemo animi quis quidem perspiciatis
    iure perferendis architecto maiores itaque voluptatibus culpa dolor
    cumque praesentium doloremque labore!
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    In, possimus, soluta et natus nemo animi quis quidem perspiciatis
    iure perferendis architecto maiores itaque voluptatibus culpa dolor
    cumque praesentium doloremque labore!
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    In, possimus, soluta et natus nemo animi quis quidem perspiciatis
    iure perferendis architecto maiores itaque voluptatibus culpa dolor
    cumque praesentium doloremque labore!
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    In, possimus, soluta et natus nemo animi quis quidem perspiciatis
    iure perferendis architecto maiores itaque voluptatibus culpa dolor
    cumque praesentium doloremque labore!
  </p>
</main>

</div>