Блог

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

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

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

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

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

  amp;:hoveramp;:not(.collapsed){
        color: $color-light-blue;
      }
  

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

Так же, как вы делаете в CSS:

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

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

Вы можете поставить запятую между двумя объединяющими селекторами, вот так: amp;:hover, amp;: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;
  amp;:hover, amp;:not(.collapsed) {
    color: $color-light-blue;
  }
}
  

JSfiddle.

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

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

 /*SCSS*/
$color-light-blue : red;
.btn-link {
  amp;: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>