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.
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
, ...)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.