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