如何使用 scss 从 child 中 select parent pseudo-class

Question

我想 select parent 使用以下模式。

我知道我可以在 parent selector 中写这个，但我想知道是否可以在 parent 的伪 class 前面加上前缀] 到 child 从 child select 或.

JSX:

<div class="parent">
    <div class="child" />
</div>
<div class="parent">
    <div class="child" />
</div>

SCSS:

.parent {
    height: 100px;

    .child {
    // the goal is to write this so it produces the CSS output below, from 
    // within .child

        &:first-child & {
            height: 50px;
        }
    }
}

CSS [输出]:

.parent:first-child .child {
    height: 50px;
}

Answer 1

看来这真的很简单。哎呀

您只需执行以下操作：

SCSS:

.child {
    .parent:first-child & {
        height: 50px;
    }
}

这可能看起来很傻，但对于我的情况来说，它实际上很有用。

Answer 2

也许这不是最有用的代码但有效：

SASS

.parent {
  $root: &;
  height: 100px;
  @at-root {
    .child {
      @at-root {
        #{$root}:first-child #{&} {
          height: 50px;
        }
      }
    }
  }
}

输出

.parent {
  height: 100px;
}
.parent:first-child .child {
  height: 50px;
}

如何使用 scss 从 child 中 select parent pseudo-class

How to select parent pseudo-class from within child using scss

css

sass

ampersand