html - 在另一个CSS属性中包含一个CSS属性，以及CSS中 '&'的意义

Question

我试图制作一个交互式汉堡包图标，并在代码笔上找到了教程和代码。问题是我在代码笔上找到的代码在我的机器上不起作用，但它在代码笔上生成结果。此外，在 CSS 中，我可以看到一些属性放置在我不理解的其他属性中。请看下面的代码。

HTML:

<div class="nav-icon cross">
<div class="span"></div>
</div>

CSS:

.nav-icon{
  height:70px;
  width:88px;
  position:relative;

  .span {
    height:6px;
    width:55px;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    background:black;
    transition:all 0.3s;

    &::before,&::after {
      height:6px;
      width:100%;
      background:black;
      position:absolute;
      content:"";
      transition:all 0.3s;
    }
    &::after {
      top:20px;
    }
    &::before {
      top:-20px;
    }
  }

  &.active .span::after {
    top:0;
    transform:rotate(45deg);
  }
    &.active .span::before {
    top:0;
    transform:rotate(-45deg);
  }

  &.active .span{
    background:none;
  }
}

Answer 1

您发布的是 SCSS，您必须将其编译成 CSS

您可以通过链接阅读有关 scss 的信息

sass link

.nav-icon {
  height: 70px;
  width: 88px;
  position: relative;
}

.nav-icon .span {
  height: 6px;
  width: 55px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: black;
  transition: all 0.3s;
}

.nav-icon .span::before,
.nav-icon .span::after {
  height: 6px;
  width: 100%;
  background: black;
  position: absolute;
  content: "";
  transition: all 0.3s;
}

.nav-icon .span::after {
  top: 20px;
}

.nav-icon .span::before {
  top: -20px;
}

.nav-icon.active .span::after {
  top: 0;
  transform: rotate(45deg);
}

.nav-icon.active .span::before {
  top: 0;
  transform: rotate(-45deg);
}

.nav-icon.active .span {
  background: none;
}


/*# sourceMappingURL=style.css.map */

<div class="nav-icon cross">
  <div class="span"></div>
</div>