CODEWITHSUNDEEP
csssass
Petya Naumova
Petya Naumova

Reputation: 717

SASS: Expression with Combined &:not selectors

I am trying to understand what this SASS code will generate:

&--active, &:not(&--disabled):not(&--inactive):hover, &:not(&--disabled):not(&--inactive):focus {
   background-color: white;
   color: grey;
}

I am wondering about this part:

&:not(&--disabled):not(&--inactive):hover

The first part of the expression is clear to me &:not(&--disabled).

This will exclude the class &--disabled when applying the styles written below.

But what does it mean the scss next to it - :not(&--inactive):hover? And these &:not selectors used combined?

Also, this scss has some strange behaviour - on localhost this doesn't not work - does not apply at all, and when it is deployed on a test server, it got applied and works fine (it gets compiled and minified by gulp plugins).

Any help and advice would be appreciated.

Upvotes: 3

Views: 7974

Answers (1)

birdspider
birdspider

Reputation: 3074

why not compile it and then reason about the output ?

into http://www.sassmeister.com/ put the following (.parent is just a parent rule which is needed to use the & parent selector)

.parent {
  &--active, &:not(&--disabled):not(&--inactive):hover, &:not(&--disabled):not(&--inactive):focus {
     background-color: white;
     color: grey;
  }
}

and behold:

.parent--active,
.parent:not(.parent--disabled):not(.parent--inactive):hover,
.parent:not(.parent--disabled):not(.parent--inactive):focus {
  background-color: white;
  color: grey;
}

so having the output we return to the matter at hand

&:not(&--disabled):not(&--inactive):hover

is 

.parent:not(.parent--disabled):not(.parent--inactive):hover

ergo

any .parent which does not have .parent--disabled and .parent--inactive classes will have a white background and grey color on :hover

(.parent is just an example here - could be div,#foo, ...)

Upvotes: 6

Related Questions