Holen Sie sich Root-Selektor, und verwenden Sie es als Teil eines anderen Selektors - in Stylus

Question

Ich versuche, eine kleine Sache herauszufinden, die mich eine Weile verärgert hat.

Ich möchte den unteren Selektor in den Code unten, um den Root-Selektor wieder zu verwenden, so dass der Selektor sich wie der Arbeits Selektor verhält.

.page 
    position relative 


    &__content 
     scroll() 
     overflow auto 


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


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

Ich weiß, ich könnte die ~/Selektor innerhalb des __content Block tun, aber ich würde lieber nicht - wenn möglich.

Answer 1

können Sie nur verwenden ~/ (anfänglichen Referenz) zu Beginn des Wählers, aber es ist eine andere Art und Weise das gleiche mit Teilreferenz^[N] zu erreichen:

Stylus:

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

Ausgabe:

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