例えば.btn1ってクラスのa要素またはbutton用のスタイルを作るとして、
普段は白文字、:disabledもしくはhref属性がない場合ならグレー文字ってしたいと思うじゃないですか。
そしたら以下みたいなコード書くと思います。

.btn1 {
  color: white;
  
  &:disabled, &:not(button):not([href]) {
    color: gray;
  }
}

でもここで上記を継承するチェックボックス用の.btn1-checkboxが現れると、
aでもbuttonでもない場合は:not([href])が効いてしまい、常にグレーになってしまうので、どうするか・・・

.btn1 {
  color: white;
  
  &:disabled, &:not(button):not([href]) {
    color: gray;
  }
}

// チェックボックスで使いたいけど、このままじゃ常にグレーになっちゃう
.btn1-checkbox {
  @extend .btn1;
}

続きを読む