Question

一个简单的问题：

为什么我必须为每个嵌套状态重复第一个古迹，如位置和顶部？我认为重点是不重复它？如果我删除嵌套类中的状态，它就不起作用。

我想用它们像：

标识必须在左上方，所以我使用top__left作为一个类，一个菜单，即top__right等......

  .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%);
  }
}

Answer 1

我建议使用多个类：

.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>

Answer 2

继承父选择器的所有属性是没有意义的，但是对于需要我们使用@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%);
}

scss嵌套，重复必要

2 个答案: