獲取根選擇器，並將它用作另一個選擇器的一部分 - 在Stylus中

Question

我試圖弄清楚一段時間以來的一些小事情。

我想在下面的代碼底部選擇器重新使用根選擇器，所以選擇器的行爲就像它上面的工作。

.page 
    position relative 


    &__content 
     scroll() 
     overflow auto 


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


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

我知道我可以做__content塊內的〜/選擇，但我寧願沒有 - 如果可能的話。

Answer 1

只能在選擇器的開始處使用~/（初始參考），但還有另一種方式來實現相同的跟局部參考^[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; 
}