SCSSのターゲット固有セレクタ

Question

セレクタチェーンの先祖の1つを変更する方法はありますか？

これは私が生産したいCSSです：

#ViewCardDialog > header::after { 
    // styles 
} 

#ViewCardDialog.blocked > header::after { 
    // blocked styles 
} 

#ViewCardDialog.on-hold > header::after { 
    // on hold styles 
} 

そして、このようなものが可能であった場合、私は思っていた：

#ViewCardDialog { 

    > header { 

     &::after { 

      // styles 

      @parent(.blocked) & { 
       // blocked styles 
      } 

      @parent(.on-hold) & { 
       // on hold styles 
      } 
     } 

    } 

} 

Answer 1

あなたはヘッダに.blockedと.on-holdクラスを取り付けた場合は、あなたの親セレクタはうまくいくかもしれませんが、私はあなたが持っているものを与えられたと考えています：

#ViewCardDialog { 
    > header::after { 
      // styles 
    } 
    &.blocked > header::after { 
     // blocked styles 
    } 

    &.on-hold > header::after { 
     // on hold styles 
    } 
} 

Answer 2

#ViewCardDialog { 
    > header{ 
     &:after { 
      // styles 
     } 
    } 
    &.blocked{ 
     > header{ 
      &:after { 
       // styles 
      } 
     } 
    } 
    &.on-hold{ 
     > header{ 
      &:after { 
       // styles 
      } 
     } 
    } 
} 

Answer 3

おそらく少し混乱したコードですが、私が望むことを達成するために見つけた最良の方法です。

SASS

#ViewCardDialog { 
    $root: &; 
    > header { 
    &::after { 
     color: blue; 
     @at-root #{selector-replace(&, $root, $root+".blocked")} { 
     color: red; 
     } 
     @at-root #{selector-replace(&, $root, $root+".on-hold")} { 
     color: green; 
     } 
    } 
    } 
} 

出力：まず、私は親のための変数を定義してから、私は親にクラスを追加するための置き換え機能を使用し、また、セレクタの繰り返しを防ぐために@at-rootディレクティブを必要とします

#ViewCardDialog > header::after { 
    color: blue; 
} 
#ViewCardDialog.blocked > header::after { 
    color: red; 
} 
#ViewCardDialog.on-hold > header::after { 
    color: green; 
}