Question

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

我知道我可以在父选择器中写这个，但是我想知道是否可以从子选择器中将父类的伪类添加到子类中。< / p>

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从子内选择父伪类

2 个答案: