CODEWITHSUNDEEP
csssass
Bar Gans
Bar Gans

Reputation: 1683

How to combine two SCSS selectors?

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

Upvotes: 0

Views: 1262

Answers (3)

Md. Abu Sayed
Md. Abu Sayed

Reputation: 2486

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>

Upvotes: 0

Mr Lister
Mr Lister

Reputation: 46599

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!

Upvotes: 4

James Coyle
James Coyle

Reputation: 10428

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.

Upvotes: 4

Related Questions