scss嵌套，必要时重复

一个简短的问题：

为什么我必须为每个嵌套状态重复第一个参数，如位置和顶部？我想重点是不要重复？ 如果我删除嵌套类中的状态，它将不起作用

我想像这样使用它们：

徽标必须位于左上角，所以我使用左上角作为一个类，用于菜单，即右上角等

  .top {
  position: fixed;
  top: 2%;
  &__left {
    position: fixed;
    top: 2%;
    left: 1%;
  }
  &__right {
    position: fixed;
    top: 2%;
    right:1%;
  }
  &__centered {
    position: fixed;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

---

我建议使用多个类：

.top {
  position: fixed;
  top: 2%;
  &.left {
    left: 1%;
  }
  &.right {
    right:1%;
  }
  &.centered {
    top: initial;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

您可以这样使用它：

<div class="top left"></div>
<div class="top right"></div>
<div class="top centered"></div>

---

继承父选择器的所有属性没有任何意义，但对于需要使用@extend指令的情况：

SASS

.top {
  position: fixed;
  top: 2%;
  &__left {
    @extend .top ;
    left: 1%;
  }
  &__right {
    @extend .top;
    right:1%;
  }
  &__centered {
    position: fixed;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

输出

.top, .top__left, .top__right {
  position: fixed;
  top: 2%;
}
.top__left {
  left: 1%;
}
.top__right {
  right: 1%;
}
.top__centered {
  position: fixed;
  left: 50%;
  transform: translate(-50%, -50%);
}