css - 如何将此块重写为 SASS？

Question

我是 SASS 新手，我不知道将其重写为 SCSS 语法。它是汉堡导航的一部分。任何帮助，将不胜感激。

.hamburger { 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hamburger,   /* <-------
.hamburger::before,
.hamburger::after {
  width: 30px;
  height: 3px;
  background: #0c0c0c;
  border-radius: 0.5626em;
  transition: all .4s ease-in-out;
}

.hamburger::before,
.hamburger::after {
  position: absolute;
  content: "";
}

.hamburger::before {
  top: -8px;
}

.hamburger::after {
  top: 8px;
}

我应该为这部分创建一个 mixin 并调用它两次吗？

  width: 30px;
  height: 3px;
  background: #0c0c0c;
  border-radius: 0.5626em;
  transition: all .4s ease-in-out;

更新：我试过这个似乎可行，但不确定我在语法方面是否正确：

.hamburger {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  &,
  &::before,
  &::after {
    width: 30px;
    height: 3px;
    background: #0c0c0c;
    border-radius: 0.5626em;
    transition: all .4s ease-in-out;
  }

  &::before,
  &::after {
    position: absolute;
    content: "";
  }

  &::before {
    top: -8px;
  }
  
  &::after {
    top: 8px;
  }
}

标签： csssass

Answer 1

.hamburger {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  &,
  &::before,
  &::after {
    width: 30px;
    height: 3px;
    background: #0c0c0c;
    border-radius: 0.5626em;
    transition: all .4s ease-in-out;
  }

  &::before,
  &::after {
    position: absolute;
    content: "";
  }

  &::before {
    top: -8px;
  }
  
  &::after {
    top: 8px;
  }
}