複数のクラスと同じスタイルの疑似クラスが少ない

Question

以下のCSSを簡単なコードで簡略化できますか？

.push-nav > .active > a, 
.push-nav > .active > a:hover, 
.push-nav > .active > a:focus { 
    background:#000; 
    color: #fff; 
} 

私の試み：

.push-nav > .active > a { 
    &:focus, 
    &:hover { 
     background:#000; 
     color: #fff; 
    } 
} 

結果：

.push-nav > .active > a:focus, 
.push-nav > .active > a:hover { 
    background: #000; 
    color: #fff; 
} 

.push-nav > .active > aが欠落しています。

アイデア？

Answer 1

.push-nav > .active > aが含まれていないため、表示されません。

アンパサンド&は、現在のセレクタを表します。

追加：あなたのコード& = .push-nav > .active > aで

.push-nav > .active > a { 
    &, 
    &:focus, 
    &:hover { 
     background: #00; 
     color: #fff; 
    } 
} 

。だから&:focus = .push-nav > .active > a:focus。