获取根选择器，并将其用作另一个选择器的一部分 - 在 Stylus 中

Question

我正在努力解决一件让我烦恼了一段时间的小事。

我希望下面代码中的底部选择器重新使用根选择器，因此该选择器的行为与其上方的工作选择器相同。

.page
    position relative


    &__content
        scroll()
        overflow auto


    &--home // working
        .page__content
            margin 30px


    &--home // not working
        & ~/__content
            margin 30px

我知道我可以在 __content 块中使用 ~/ 选择器，但我宁愿不这样做 - 如果可能的话。

Answer 1

您只能在选择器的开头使用 ~/(initial reference) 但还有另一种方法可以使用 partial 实现相同的效果参考 ^[N]:

手写笔：

.page
    position relative
    &__content
        scroll()
        overflow auto
    &--home 
       & ^[0]__content
            margin 30px

输出：

.page {
  position: relative;
}
.page__content {
  overflow: auto;
}
.page--home .page__content {
  margin: 30px;
}

获取根选择器，并将其用作另一个选择器的一部分 - 在 Stylus 中

Get root selector, and use it in as part of another selector - in Stylus

css

stylus

parent

css-selectors