scssでの条件分岐の書き方（:notや:hasについて）

はじめに

scssでの条件分岐をさせるのに，:notや:hasを使う方法があるので，具体例をベースに備忘録としてまとめてみます．

:notでの分岐の例

以下では，ホバー時にカラーが青になり，ホバーでdisabled属性がないときにカラーが赤になる．

.hoge {
  &:hover {
    color: blue;
  }

  &:hover:not(:disabled) {
    color: red;
  }
}

:hasでの分岐の例

:hasでは子要素の状態を見て親要素のスタイルを変更できます．
以下では，data-invalidを持ち，disabledではないテキストエリアを，containerの子要素として持つときにcontainerの背景がグレーになります．
注意：このとき，data-invalidを持ち，disabledであるテキストエリアが子要素ありますが，背景はグレーになります．理由は，:hasは内部の子要素に条件を満たすものが1つでもある場合にtrueとなるからです．

.container {
  &:has(.textarea[data-invalid]:not(:disabled)) {
    background-color: gray;
  }
}

<div class="container"> 
  <textarea class="textarea" data-invalid></textarea>  <!-- これによって適用される -->
  <textarea class="textarea" data-invalid disabled></textarea>  
</div>