A hamburger menu that can be used as a mixin to provide an icon for responsive websites.

SASS Hamburger menu

@mixin hamurger-menu-icon($hamburger-bread-height: 5px,
$hamburger-bread-spacing: 5px,
$hamburger-width: 25px,
$hamburger-color: #FFF) {
  &:before {
    content: "";
    position: absolute;
    width: $hamburger-width;
    height: $hamburger-bread-height;
    background: $hamburger-color;
    box-shadow: 0 ($hamburger-bread-height+$hamburger-bread-spacing)  0 0 $hamburger-color, 0 (2*$hamburger-bread-height+2*$hamburger-bread-spacing) 0 0 $hamburger-color;
    // Vertically center the menu.
    margin-top: -($hamburger-bread-height * 1.5 + $hamburger-bread-spacing * 1);
    top: 50%;
  }
}