SASSのネストされたクラスから親クラスをターゲットにする方法

Question

.group-leftを2回も表示せずにSASSで以下のようなことを達成する方法はありますか？

.wrapper .group-left { 
    background-color: blue; 
} 
.wrapper-child:nth-child(2n+2) .group-left { 
    background: red; 
} 

私は.group-left後にアンパサンドを入れしようとしていたが、動作しません。だから、私は.group-leftを再選択しなければならない。以下は私の現在のコードです。

.wrapper { 
    &:nth-child(2n+2) .group-left { 
    background-color: red; 
    } 
    .group-left { 
    background-color: blue; 
    } 
} 

助言してください。ありがとうございました。

Answer 1

あなたは親セレ​​クタを使用し、SASSで

.group-left { 
    .wrapper & { 
    background-color: blue; 
    } 
    .wrapper-child:nth-child(2n+2) & { 
    background: red; 
    } 
} 

Answer 2

これを試してください。

.wrapper { 
    .group-left { 
     background-color: blue; 
    } 
} 
.wrapper-child { 
    &:nth-child(2n+2) { 
     .group-left { 
      background: red; 
     } 
    } 
}