Generated by SassMeister.com.

SassMeister-input-HTML.html

<input type="checkbox" id="tpl-sidebar-switch">
    <div id="wrap">
        <section class="tpl-sidebar">
            <nav>
                <div class="navigation-colors">
                    <h1>I'm the navigation!</h1>
                </div>
            </nav>
            <div class="sidebar-options">
                <h1>I'm the sidebar!</h1>
            </div>
        </section>
        <div class="tpl-switcher">
            <div class="tpl-switch-btn"></div>
            <label for="tpl-sidebar-switch"></label>
        </div>
        <section class="tpl-content">
            <div class="tpl-header">
                <div class="tpl-breadcrumb">
                    <h1>We're the breadcrumbs!</h1>
                </div>
                <div class="logo-area">
                  <h1>I'm the logo!</h1>
                </div>
                <div class="title-area">
                  <h1>I'm the title!</h1>
                </div>
            </div>
            <div class="tpl-container">
                <div class="content-options">
                    <h1>I'm the content!</h1>
                </div>
                <div class="footer-options">
                    <h1>I'm the footer!</h1>
                </div>
            </div>
        </section>
    </div>

SassMeister-input.sass

// ----
// Sass (v3.3.14)
// Compass (v1.0.0.rc.1)
// ----

@import "compass"
$sidebarwidth: 300px
$white: white
$standard-transition: 200ms ease-in
$switcherwidth: 60px
$switcherbg: black
$sidebarbg-ie: rgb(50,50,50)
$sidebarbg: rgba(20,20,20,0.8)
$sidebarfontcolor: white

#tpl-sidebar-switch
  display: none
  &:checked ~*

    .tpl-sidebar
      left: 0
      overflow-y: auto
    .tpl-switcher
      left: $sidebarwidth

    .navigation-colors,
    .sidebar-options
      opacity: 1

.tpl-sidebar
  position: fixed
  z-index: 4
  left: -$sidebarwidth
  width: $sidebarwidth
  height: 100%
  background-color: transparent
  transition: (left $standard-transition)
  word-wrap: break-word

.tpl-switcher
  position: fixed
  z-index: 5
  left: 0px
  width: $switcherwidth
  height: 100%
  background: $switcherbg
  +transition(left $standard-transition)
  label
    position: absolute
    width: 100%
    height: 100%
    cursor: pointer


.tpl-content
  position: relative
  left: 0px
  transition: (left $standard-transition)
  z-index: 1
.tpl-header
  float: left
  margin-left: $switcherwidth
  position: relative
  margin: 0 auto
  width: 900px
  float: none
.tpl-container
  width: 900px
  margin: 0 auto


.tpl-switch-btn
  position: relative
  margin-left: 17px
  &:before
    content: ""
    position: absolute
    top: 17px
    left: 0
    width: 25px
    height: 3px
    border-top: 9px double $white
    border-bottom: 3px solid $white

.sidebar-options
  background-color: $sidebarbg-ie
  background-color: $sidebarbg
  padding: 80px 30px 30px
  color: $sidebarfontcolor

SassMeister-output.css

#tpl-sidebar-switch {
  display: none;
}
#tpl-sidebar-switch:checked ~ * .tpl-sidebar {
  left: 0;
  overflow-y: auto;
}
#tpl-sidebar-switch:checked ~ * .tpl-switcher {
  left: 300px;
}
#tpl-sidebar-switch:checked ~ * .navigation-colors,
#tpl-sidebar-switch:checked ~ * .sidebar-options {
  opacity: 1;
}

.tpl-sidebar {
  position: fixed;
  z-index: 4;
  left: -300px;
  width: 300px;
  height: 100%;
  background-color: transparent;
  transition: left 200ms ease-in;
  word-wrap: break-word;
}

.tpl-switcher {
  position: fixed;
  z-index: 5;
  left: 0px;
  width: 60px;
  height: 100%;
  background: black;
  -moz-transition: left 200ms ease-in;
  -o-transition: left 200ms ease-in;
  -webkit-transition: left 200ms ease-in;
  transition: left 200ms ease-in;
}
.tpl-switcher label {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.tpl-content {
  position: relative;
  left: 0px;
  transition: left 200ms ease-in;
  z-index: 1;
}

.tpl-header {
  float: left;
  margin-left: 60px;
  position: relative;
  margin: 0 auto;
  width: 900px;
  float: none;
}

.tpl-container {
  width: 900px;
  margin: 0 auto;
}

.tpl-switch-btn {
  position: relative;
  margin-left: 17px;
}
.tpl-switch-btn:before {
  content: "";
  position: absolute;
  top: 17px;
  left: 0;
  width: 25px;
  height: 3px;
  border-top: 9px double white;
  border-bottom: 3px solid white;
}

.sidebar-options {
  background-color: #323232;
  background-color: rgba(20, 20, 20, 0.8);
  padding: 80px 30px 30px;
  color: white;
}

SassMeister-rendered.html

<input type="checkbox" id="tpl-sidebar-switch">
    <div id="wrap">
        <section class="tpl-sidebar">
            <nav>
                <div class="navigation-colors">
                    <h1>I'm the navigation!</h1>
                </div>
            </nav>
            <div class="sidebar-options">
                <h1>I'm the sidebar!</h1>
            </div>
        </section>
        <div class="tpl-switcher">
            <div class="tpl-switch-btn"></div>
            <label for="tpl-sidebar-switch"></label>
        </div>
        <section class="tpl-content">
            <div class="tpl-header">
                <div class="tpl-breadcrumb">
                    <h1>We're the breadcrumbs!</h1>
                </div>
                <div class="logo-area">
                  <h1>I'm the logo!</h1>
                </div>
                <div class="title-area">
                  <h1>I'm the title!</h1>
                </div>
            </div>
            <div class="tpl-container">
                <div class="content-options">
                    <h1>I'm the content!</h1>
                </div>
                <div class="footer-options">
                    <h1>I'm the footer!</h1>
                </div>
            </div>
        </section>
    </div>