css - scss 嵌套语法 : nest with parent adjoin class

Question

我要输出:.selector.another-selector .selector__block{一些声明}但我想嵌套它:
我在最后使用 &，所以我可以将它嵌套在 __block 下，但是如何让它与 .selector 相邻？
代码示例:

.selector{
  &__block{
  // i want to put my .another-selector declaration here
  .another-selector &{ 
    //syntax issue
    //need to make it .selector.another-selector .selector__block
  }
}

提前致谢。

Answer 1

如果您嵌套选择器，则它必须位于 .selector__block 上下文 (&) 中。

这里有 2 个解决方案:

您可以像这样重复第一个选择器:

.selector {
  &__block {
      ...
      .another-selector.selector & { 
          // Here `&` means  `.selector__block`
      }
  }
}

你可以用不同的方式嵌套:

.selector {
  &__block {
    ...
  }
  &.another-selector &__block { 
     // Here `&` means  `.selector`
  }
}

也许第二种解决方案更好，因为它尊重 inception rule并且较少依赖于 DOM 结构。

顺便说一句，你也可以试试https://www.sassmeister.com/玩转你的选择器