scss 轻松创建汉堡包按钮。

Posted 2021-05-18

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了scss 轻松创建汉堡包按钮。相关的知识，希望对你有一定的参考价值。

<button class="hamburger">
  Menu
</button>

.hamburger {
  @include hamburger( 40px, 4px, #ccc );
}

// Hamburger menu creator
@mixin hamburger( $width, $height, $background ) {
  position: relative;
  display: block;
  overflow: visible;
  width: $width;
  border: 0;
  font-size: 0;
  line-height: 1;
  -webkit-appearance: none;

  &, &:before, &:after {
    height: $height;
    background-color: $background;
  }

  &:before, &:after {
    position: absolute;
    left: 0;
    right: 0;
    display: block;
    content: " ";
  }

  $newHeight: -#{(strip-units($height) * 2)}px;

  &:before {
    top: $newHeight;
  }

  &:after {
    bottom: $newHeight;
  }
}

以上是关于scss 轻松创建汉堡包按钮。的主要内容，如果未能解决你的问题，请参考以下文章