How to combine two SCSS selectors?

Question

I want to give a different color to the element if either of the two conditions exists. Here is the code:

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

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

Everything is good, but it will be better if you can combine the two selectors

I already tried:

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

But only the hover is identified

Answer 1

Same way as you do in CSS:

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

This sets the color only if the element is in a hover state or doesn't have the class collapsed .

Answer 2

You can put a comma between the two combining selectors, like this: &:hover, &:not(.collapsed) {

Full example:

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 .

Sorry, no StackSnippet. We still can't handle SCSS here!

Answer 3

You can try this simple change your code

 /*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>