在SCSS选择器中包含可选的伪代码类。

Question

如果，如果有这样的事：

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

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

然后，.has-error内输入仍将风格的蓝色，因为input:focus更为具体。

有没有一种优雅的方式来覆盖这个？ 我已经得到了最好的是：

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; 
    } 
    } 
}