疑似クラス便利ですね。 今回は以下のようにボタンのスタイルをdisabledな時とそうでないときで分けるために使いました。
my-btn:hover[disabled] {
color: $baseColor;
font-weight: bold;
background-color: $accentColor;
border: 2px solid darken($accentColor, 7.5%);
cursor: pointer;
}
my-btn:hover:not([disabled]) {
color: $baseColor;
background-color: $accentColorDarker;
border: 2px solid darken($accentColorDarker, 7.5%);
}
my-btn:hoverを定義し、disabledなときのスタイルでそれを上書きするという方法でもやれるけど、 スタイルの上書きはやらない方が良いので上記の書き方にしました。
参考：
