のルートを使用する@と＆セレクタ

Question

のリストに私は、私はこれで

.btn-primary:hover, 
.btn-primary:focus, 
.btn-primary:active, 
.btn-primary.active, 
.open .dropdown-toggle.btn-primary { 
... 
} 

のような多くの構造とSASSに移動しようとCSSがあります：私は明らかに取得

.btn-primary { 
    ... 
    &:hover, 
    &:focus, 
    &:active, 
    &.active, 
    .open .dropdown-toggle#{&} { 

：

を

：

.btn-primary:hover, 
.btn-primary:focus, 
.btn-primary:active, 
.btn-primary.active, 
.btn-primary .open .dropdown-toggle.btn-primary { 
... 
} 

は、しかし、私はでルート@を使用することを許可されていないように見えます

SASSは、コンマの後にセレクタを期待して@を取得するので...

Answer 1

@at-rootディレクティブは、この方法を使用することはできません。これは、リスト内の個々のセレクタではなく、完全なセレクタに適用されることを意図しています。あなたのセレクタは両方のクラスがあるので、あなただけの先頭にあなたの親セレクターの位置を変えるのではなく最後にそれを追加しようとすることができます：

.btn-primary { 
    &:hover, 
    &:focus, 
    &:active, 
    &.active, 
    .open &.dropdown-toggle { 
     color: red; 
    } 
} 

出力：

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .btn-primary.dropdown-toggle { 
    color: red; 
} 

それは絶対でなければならない場合終わり、最も簡単な解決策は、単に使用することです（。たとえば、あなたが要素または擬似セレクタを使用している）拡張：

%common { 
    color: red; 
} 

.btn-primary { 
    &:hover, 
    &:focus, 
    &:active, 
    &.active { 
     @extend %common; 
    } 

    @at-root .open .dropdown-toggle#{&} { 
     @extend %common; 
    } 
} 

出力：

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary { 
    color: red; 
}