Sass conversion of offcanvas layout 2: http://zurb.com/playground/off-canvas-layouts

offcanvas.css.sass

// Off canvas layout CSS/JS provided by or adapted from work by Jason
// Weaver and Luke Wroblewski Requires globals.css grid.css

body.off-canvas
  padding: 0
  margin: 0

.container
  width: 100%

.row
  overflow: hidden

.row .row
  overflow: visible

.paneled .container
  overflow: hidden

.paneled .row
  width: 100%

[role="main"]:before
  content: " "
  position: absolute
  z-index: -1
  top: 0
  left: -100%
  width: 100%
  height: 100%

[role="complementary"], [role="main"]
  width: 100%
  padding: 0 15px
  display: block
  position: relative
  z-index: 1
  -webkit-transition: 0.25s all ease-in
  -moz-transition: 0.25s all ease-in
  -o-transition: 0.25s all ease-in
  transition: 0.25s all ease-in

.paneled [role="main"]
  padding: 0

.page-panel
  width: 100%
  padding: 0 15px
  -webkit-transition: 0.3s margin ease-in-out
  -moz-transition: 0.3s margin ease-in-out
  -o-transition: 0.3s margin ease-in-out
  transition: 0.3s margin ease-in-out
  background: #fff

#switchPanels
  margin: 0 -15px

.hide-extras [role="complementary"]
  display: block

[role="navigation"]#topMenu
  -webkit-transition: 0.25s all ease-in
  -moz-transition: 0.25s all ease-in
  -o-transition: 0.25s all ease-in
  transition: 0.25s all ease-in

[role="navigation"]#topMenu ul
  margin-top: 0

[role="complementary"]
  margin-left: -100%
  width: 80%
  float: left
  z-index: 2

[role="main"]
  margin-left: 0
  float: right
  z-index: 1
  position: relative

.paneled [role="main"]
  background: #fff
  width: 500%
  overflow: hidden
  float: none
  position: relative
  left: 0
  -webkit-transition: 0.15s all ease-in
  -moz-transition: 0.15s all ease-in
  -o-transition: 0.15s all ease-in
  transition: 0.15s all ease-in

.page-panel
  min-height: 400px
  float: left
  margin: 0
  width: 20%

.active [role="complementary"]
  margin-left: 0

.active [role="main"]
  margin-right: -80%

.active-menu [role="navigation"]#topMenu
  margin-top: 0 !important

@media all and (min-width: 768px)
  menu-button, .sidebar-button
    display: none

  [role="complementary"]
    width: 20%
    margin-left: 0
    float: left
    padding: 0 15px

  [role="main"]
    width: 80%
    padding: 0 15px

  .paneled [role="main"]
    width: 100%
    padding: 0
    background: #f4f4f4
    left: 0 !important

  .page-panel
    display: block
    min-height: 800px
    float: none
    margin: 0
    width: 100%
    background: #f4f4f4

  .hide-extras [role="main"]
    width: 100%

  .hide-extras [role="complementary"]
    display: none

  [role="navigation"]#topMenu
    display: none