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

Sass选择器带有＆符，另外一个类带有OR

1 个答案: