Scss - 如何添加后缀并选择作为直接子元素

Question

这是我的代码：

.a {
  > .b {
    > .c {
      & > &__content {
        background: black;
      }
    }
  }
}

我想要什么：

.a > .b > .c > .c__content {
  background: black;
}

我实际得到的是：

.a > .b > .c > .a > .b > .c__content {
  background: black;
}

那么我该怎么做呢。

Answer 1

您不能直接使用 &__content，因为

&

符号指向其父级（此处为 .c），并且它会生成 .c__content。

要正确定位

.a > .b > .c > .c__content

，您需要再次指定完整的选择器路径。您可以通过使用变量或直接写入类名来完成此操作：

$c: ".c";

.a {
  & > .b {
    & > $c {
      & > #{$c}__content {
        background: black;
      }
    }
  }
}

或者不使用变量：

.a {
  & > .b {
    & > .c {
      & > .c__content {
        background: black;
      }
    }
  }
}

这可确保

__content

元素正确嵌套在 .c 中，从而在 BEM 方法中保持正确的层次结构。