带符号的SCSS/SASS奇怪行为

我尝试在使用SASS时在父级之后使用符号AND，以便在父级的类更改时修改元素的行为

我的SCS如下所示：

#filter {
    width: 100%;
    height: 68px;
    position: absolute;
    top: 0;
    left: 0;
    transform:translate3d(100%, 0, 0);
    @extend .bg-color--blue;
    @extend .animate;

    &.open {
        transform:translate3d(0, 0, 0);
    }

    .filter {
        width:100%;
        height:100%;

        &__container {
            display:none;
        }

        &__pull {
            width:65px;
            height:50px;
            @extend .bg-color--blue;
            @extend .animate;

            #filter.open & {
                @extend .bg-color--blue-dark;
                color:red;
            }
        }
    }
}

我看到的主线是在层次结构的末尾<代码>#filter.open&{

它当前正在输出以下内容：

#filter.open #filter .filter__pull {
    color: red; 
}

我需要它输出的是：

#filter.open .filter__pull {
    color: red;
}

我不知道它为什么要在那里添加额外的

#filter

---

有什么想法吗？

这并不理想，但行末尾的符号（&）似乎会将所有内容复制到嵌套SCS的根

我已经从id

#filter

下删除了类

.filter

（我知道这很混乱），并将

.filter

作为文件中的基本元素

这样，当

&

复制层次结构时，它不会一直复制到

#filter

元素

#filter {
  ...

  &.open {
    ...
  }
}
.filter {
  ...

  &__container {
    ...
  }

  &__pull {
    ...

    #filter.open &  {
      @extend .bg-color--blue-dark;

      i {
        transform: translate3d(-100%, -50%, 0);
        @extend .animate;
      }
    }
  }
}

---

在这一阶段，我认为你正在努力减少你正在编写的SCS的数量，而不是让它更具可读性和可管理性。为什么不这样做：

#filter {
    ...

    &.open {
        transform:translate3d(0, 0, 0);
        .filter {
            &__pull {
                @extend .bg-color--blue-dark;
                color:red;
            }
        }
    }

    .filter {
        ...

        &__pull {
            width:65px;
            height:50px;
            @extend .bg-color--blue;
            @extend .animate;
        }
    }
}

---

这更具可读性，并且您正在将所有

open

css分组到自己的块中，因此如果您想要更改类

open

，例如更改为

active

或其他内容，您可以在一个位置更改它。

尝试将

#filter.open&

更改为

和#filter.open{

@developernator，这将使它成为

\filter.filter\uuu pull\filter.open

这是不正确的，但它似乎一直到你开始的地方的根…那么在根目录下尝试

@at root

会

@at root

让我们再看看根目录下，

\filter

#filter {
    ...

    &.open {
        transform:translate3d(0, 0, 0);
        .filter {
            &__pull {
                @extend .bg-color--blue-dark;
                color:red;
            }
        }
    }

    .filter {
        ...

        &__pull {
            width:65px;
            height:50px;
            @extend .bg-color--blue;
            @extend .animate;
        }
    }
}