SASS：コンバインド＆と式：ないセレクタ

Question

私はこのSASSコードが生成されますかを理解しようとしています：

&--active, &:not(&--disabled):not(&--inactive):hover, &:not(&--disabled):not(&--inactive):focus { 
    background-color: white; 
    color: grey; 
} 

を、私はこの部分について疑問に思って：

&:not(&--disabled):not(&--inactive):hover 

の最初の部分を表現は私には明らかです&:not(&--disabled)。

下記のスタイルを適用する場合、これによりクラス&--disabledは除外されます。

しかし、それの隣にあるscssという意味は - :not(&--inactive):hover？そして、これらの&:notセレクターを組み合わせて使用​​しましたか？

また、このscssにはいくつかの奇妙な動作があります - これは動作しません - 全く適用されず、テストサーバーにデプロイされたときに適用され、うまく動作します（コンパイルされ、 gulpプラグインによる）。

ご協力いただければ幸いです。

Answer 1

なぜそれをコンパイルして出力について理由を教えてください。 http://www.sassmeister.com/に

は

.parent { 
    &--active, &:not(&--disabled):not(&--inactive):hover, &:not(&--disabled):not(&--inactive):focus { 
    background-color: white; 
    color: grey; 
    } 
} 

見よ（.parentが&親セレクタを使用するために必要とされるだけ親ルールである）以下 を入れ：

.parent--active, 
.parent:not(.parent--disabled):not(.parent--inactive):hover, 
.parent:not(.parent--disabled):not(.parent--inactive):focus { 
    background-color: white; 
    color: grey; 
} 

---

そう有します出力私たちは手元にある問題に戻ります

&：いない（& --disabled）：しない（& --inactive）：

を置い

.parent:not(.parent--disabled):not(.parent--inactive):hover 

エルゴ

.parent--disabledとを有していない任意.parentあります.parent--inactiveクラスは、白い​​背景と灰色の色で表示されます:hover

（.parentはここだけの例である - div、#foo、...することができる）