如何使用 scss 从子级中选择父级伪类

Question

我想使用以下模式选择父级。

我知道我可以在父选择器中写这个，但我想知道是否可以在子选择器中为子选择器添加父伪类的前缀。

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

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

SASS

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

输出

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

Answer 2

看来这真的很容易。哎呀。

您只需执行以下操作：

SCSS：

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

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