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