より正確なハンバーガーメニューアイコン

hamburger.pug

.hamburger: span

sqrt.scss

// https://www.antimath.info/css/sass-sqrt-function/
@function sqrt($r) {
  $x0: 1;
  $x1: $x0;
  @for $i from 1 through 10 {
    $x1: $x0 - ($x0 * $x0 - abs($r)) / (2 * $x0);
    $x0: $x1;
  }
  @return $x1;
}

style.scss

.hamburger {
  $w: 26px;
  $h: 22px;
  $b: 2px;
  $c: #666666;
  position: relative;
  z-index: 0;
  width: $w;
  height: $h;
  display: block;
  span, &:before, &:after {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left:0;
    right: 0;
    width: $w;
    height: $b;
    margin: auto;
    background: $c;
    transform-origin: center center;
  }
  &:before, &:after {
    content: "";
  }
  &:before {
    transform: translate3d(0, ($h / -2), 0);
  }
  &:after {
    transform: translate3d(0, ($h / 2), 0);
  }
  &.s-open {
    width: $w;
    height: $w;
    span, &:before, &:after {
      width: ($w * sqrt(2));
      left: ($w / 2 * (1 - sqrt(2)))
    }
    span {
      opacity: 0;
    }
    &:before {
      transform: rotate3d(0, 0, 1, 45deg);
    }
    &:after {
      transform: rotate3d(0, 0, 1, -45deg);
    }
  }}
}