SCSS 如何使用 & 来获取父上下文

Question

我不确定这是否可能，但我觉得可能是这样，只是我做错了。我想使用 & 来获取选择器的上下文，但我将它的所有父级都作为编译 CSS 中的上下文，而不仅仅是直接父级。看我的要点！

如果.product-comparison--ftg__entry 是.product-comparison--2 的后代，我想做的是给.product-comparison--ftg__entry 50% 的宽度。

Play with this gist on SassMeister.

Answer 1

我尽量避免过多的嵌套，只使用主标识符。对于您的情况，可以这样解决：

.product-comparison {
  &--ftg-entry {
    display: flex;
    flex-direction: column;
  }

  &--2 &--ftg-entry {
    width: 50%;
  }
}