Pauls animated hamburger button as a sass mixin

pauls-hamburger-button.sass

@mixin pauls-burger-button($width: 50px, $height: 30px, $line-height: 3px, $outer-padding: 0px, $active-selector: '&:active')
  $line-spacing: ($height - $line-height * 3) / 2
  display: inline-block
  vertical-align: middle
  width: $width
  border: $outer-padding solid transparent
  margin: $outer-padding * -1
  box-sizing: content-box
  touch-action: manipulation
  &:before, &:after, > *
    display: block
    position: relative
    top: 0
    border-top: $line-height solid currentcolor
    transition: all 350ms cubic-bezier(0.165, 0.840, 0.440, 1)
  &:before, &:after
    content: ''
    transition-property: top, transform
  > *
    margin: $line-spacing 0
    transition-property: opacity
  @at-root #{$active-selector}
    &:before
      transform: rotate(45deg)
      top: $line-spacing + $line-height
    &:after
      transform: rotate(-45deg)
      top: ($line-spacing + $line-height) * -1
    > *
      opacity: 0

// usage
.navigation-toggle
  @include pauls-burger-button(50px, 30px, 4px, 20px, '&:active') // width, height, line size, spacing between lines, active css selector
  cursor: pointer
  color: blue
  transition: .3s ease
  &:hover
    color: purple
    transform: scale(1.1)

the-markup.html

<!-- Markup, needs inner element of any type -->
<div class="navigation-toggle"><i></i></div>