Как совместить два селектора SCSS?

Question

Я хочу присвоить элементу другой цвет, если существует одно из двух условий.Вот код:

  .btn-link{
    color: $color-black;
    margin: 0;

  &:hover{
    color: $color-light-blue;
  }
  &:not(.collapsed){
    color: $color-light-blue;
  }
}

Все хорошо, но будет лучше, если вы сможете объединить два селектора

Я уже пробовал:

 &:hover&:not(.collapsed){
        color: $color-light-blue;
      }

Ноидентифицируется только hover

Answer 1

Вы можете поставить запятую между двумя комбинирующими селекторами, например так: &:hover, &:not(.collapsed) {

Полный пример:

HTML:

<span class="btn-link">one class</span>
<span class="btn-link collapsed">two class</span>

CSS:

$color-black: black;
$color-light-blue: lightblue;

.btn-link {
  color: $color-black;
  margin: 0;
  &:hover, &:not(.collapsed) {
    color: $color-light-blue;
  }
}

JSfiddle .

Извините, нет StackSnippet. Мы все еще не можем обработать SCSS здесь!

Answer 2

Так же, как в CSS:

&:hover, &:not(.collapsed) {
    color: $color-light-blue;
}

Устанавливает цвет только если элемент находится в состоянии наведения или не имеет класса collapsed.

Answer 3

Вы можете попробовать это просто изменить свой код

/*SCSS*/
$color-light-blue : red;
.btn-link {
  &:hover:not(.collapsed) {
    color: $color-light-blue;
  }
}
/*compiled  CSS*/

.btn-link:hover:not(.collapsed) {
  color: red;
}

<span class="btn-link">one class</span>
<span class="btn-link collapsed">two class</span>