オプションの擬似クラスをSCSSセレクタに含めます。

Question

の場合のようなものがある場合：input:focusは、より特異的であるため、

input, select { 
    &:focus { 
    border: solid 1px blue; 
    } 
} 

.has-error { 
    input, select { 
    border: solid 1px red; 
    } 
} 

が続い .has-error内の入力がまだ青いスタイルされます。

これを無効にするエレガントな方法はありますか？私が持っている 最高です：

input, select { 
    &:focus { 
    border: solid 1px blue; 
    } 
} 

.has-error { 
    input, select, input:focus, select:focus { 
    border: solid 1px red; 
    } 
} 

Answer 1

あなたはより多くのネスト必要があります。

.has-error { 
    input, select { 
    &, &:focus { 
     border: solid 1px red; 
    } 
    } 
}