Generated by SassMeister.com.

SassMeister-input-HTML.haml

%main 
  %nav
    %input{type:"checkbox", id: "menu"}
    %label{for: "menu", onclick: 'onclick'}
    %ul 
      %li
        %a{href:"#"} 
          Item 1
      %li
        %a{href:"#"} 
          Item 2
      %li
        %a{href:"#"} 
          Item 3
      %li 
        %a{href:"#"} 
          Item 4
      %li
        %a{href:"#"} 
          Item 5

SassMeister-input.sass

// ----
// Sass (v3.3.0)
// Compass (v1.0.0.alpha.18)
// Breakpoint (v2.4.1)
// Singularity.gs (v1.2.0.rc.6)
// Singularity Extras (v1.0.0.alpha.3)
// ----

@import "compass"
@import "breakpoint"
@import "singularitygs"
@import "singularity-extras"
 
$breakpoint-to-ems: true !global
$mobile: max-width 800px
 
body
  font-family: sans-serif
  +animation('bugfix infinite 1s')
main
  position: relative
  
+keyframes(bugfix)
  from
    padding: 0 
  to 
    padding: 0 
    
input[type=checkbox]
  position: absolute 
  top: -99999px
  left: -99999px
  
label
  cursor: pointer 
  user-select: none 
  display: none
  
+breakpoint($mobile)
  nav
    padding: 0 
    width: 100%
  ul 
    display: none
    width: 100%
    padding: 0 
    height: inhert 
    input:checked ~ &
      display: block
      li
        margin: 0 
        width: 100%
        list-style: none 
        padding: 1em 
        border: 1px solid whitesmoke
        a
          text-decoration: none 
          color: gray 
    
  label
    position: relative 
    display: block 
    width: 100% 
    min-height: 44pt 
    background-color: rgba(black, .2)  
    &:after 
      position: absolute 
      content: "\2261" 
      font-size: 2em 
      top: .5em 
      right: 1em 
    
      
// nav
//   ul > li 
//     +breakpoint($mobile) 
//       width: 100%
//       border: 1px solid whitesmoke
//       list-style: none 
//       padding: 1em 
//       text-align: center 
//       a
//         color: pink

SassMeister-output.css

body {
  font-family: sans-serif;
  -moz-animation: "bugfix infinite 1s";
  -webkit-animation: "bugfix infinite 1s";
  animation: "bugfix infinite 1s";
}

main {
  position: relative;
}

@-moz-keyframes bugfix {
  from {
    padding: 0;
  }

  to {
    padding: 0;
  }
}
@-webkit-keyframes bugfix {
  from {
    padding: 0;
  }

  to {
    padding: 0;
  }
}
@keyframes bugfix {
  from {
    padding: 0;
  }

  to {
    padding: 0;
  }
}
input[type=checkbox] {
  position: absolute;
  top: -99999px;
  left: -99999px;
}

label {
  cursor: pointer;
  user-select: none;
  display: none;
}

@media (max-width: 50em) {
  nav {
    padding: 0;
    width: 100%;
  }

  ul {
    display: none;
    width: 100%;
    padding: 0;
    height: inhert;
  }
  input:checked ~ ul {
    display: block;
  }
  input:checked ~ ul li {
    margin: 0;
    width: 100%;
    list-style: none;
    padding: 1em;
    border: 1px solid whitesmoke;
  }
  input:checked ~ ul li a {
    text-decoration: none;
    color: gray;
  }

  label {
    position: relative;
    display: block;
    width: 100%;
    min-height: 44pt;
    background-color: rgba(0, 0, 0, 0.2);
  }
  label:after {
    position: absolute;
    content: "\2261";
    font-size: 2em;
    top: 0.5em;
    right: 1em;
  }
}

SassMeister-rendered.html

<main>
  <nav>
    <input id='menu' type='checkbox'>
    <label for='menu' onclick='onclick'></label>
    <ul>
      <li>
        <a href='#'>
          Item 1
        </a>
      </li>
      <li>
        <a href='#'>
          Item 2
        </a>
      </li>
      <li>
        <a href='#'>
          Item 3
        </a>
      </li>
      <li>
        <a href='#'>
          Item 4
        </a>
      </li>
      <li>
        <a href='#'>
          Item 5
        </a>
      </li>
    </ul>
  </nav>
</main>