Cacher is the code snippet organizer for pro developers

/*Navigation element*/
.menuButton(@width: 48, @color: #fff, @lineHeight: 3px, @spaceHeight: 4px) {
    display: inline-block;
    width: @width;
    @height: (3 * @lineHeight) + (3 * @spaceHeight);
    height: @height;
    @position: (((3 * @lineHeight) + (3 * @spaceHeight)) - (3 * @lineHeight)) / 3;
    transform: translateZ(0);
    will-change: transform;

    .line,
    &:before,
    &:after {
        background-color: @color;
        content: '';
        display: block;
        height: @lineHeight;
        margin-left: 20%;
        .translate3d(0, @position + @spaceHeight, 0);
        transition: all 300ms ease 0s;
        width: 60%;
        border-radius: 2px;
    }

    &:before {
        .translate3d(0, @position, 0)
    }

    &:after {
        .translate3d(0, @position + (2 * @spaceHeight), 0)
    }

    &.active {
        &:before {
            .transform( rotate(45deg) translate3d(@height/2, @height/2, 0) )
        }

        &:after {
            .transform( rotate(-45deg) translate3d(-(@lineHeight + @spaceHeight) + 0.5, (@lineHeight + @spaceHeight) - 0.5, 0) )
        }

        .line {
            .opacity(0)
        }
    }
}

.nav-button {
    .menuButton(44px, @color-grey);
    //float: left;
    margin-bottom: -16px;
    //padding: 18px 0 6px 0px;
    cursor: pointer;
    height: 34px;
    box-sizing: content-box;
}