Sass 选择器带 & 号，加上另一个类的 OR

Question

我有一个如下所示的按钮列表：

<button class="PatientImage-button"> <img src="1"> </button>
<button class="PatientImage-button"> <img src="2"> </button>
<button class="PatientImage-button"> <img src="3"> </button>
<button class="PatientImage-button active"> <img src="4"> </button>
<button class="PatientImage-button"> <img src="5"> </button>

突出显示是通过 css 样式 border-color: #000000 完成的。

单击按钮会调用一个事件，该事件会更新按钮的类以包含active。悬停并专注于按钮也应该这样做。

我试图让 sass 选择器正确，这样我就不必在文件中写两次 border-color: #000000。这是有效的：

.PatientImage {
  &-button {
    padding: 2px;
    &:hover, &:focus {
      border-color: #000000; 
    }
  }
}
.active {
  border-color: #000000; 
}

有没有办法用 Sass 选择器做这样的事情？ （不工作）

.PatientImage {
  &-button {
    padding: 2px;
    &:hover, &:focus, .active {
      border-color: #000000; 
    }
  }
}

Answer 1

试试下面的代码：

.PatientImage-button{
  padding: 2px;
  &:hover, &:focus,&.active{
    border-color: #000000; 
  }
}