SASS:表达式与组合&:非选择器

Question

我想了解这个SASS代码会产生什么:

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

我想知道这部分:

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

表达的第一部分对我来说很清楚&:not(&--disabled).

这将&--disabled在应用下面写的样式时排除该类.

但它旁边的scss是什么意思 - :not(&--inactive):hover？这些&:not选择器结合使用了吗？

此外,这个scss有一些奇怪的行为 - 在localhost上这不起作用 - 根本不适用,当它部署在测试服务器上时,它被应用并且工作正常(它被gulp插件编译和缩小) .

任何帮助和建议将不胜感激.

Answer 1

为什么不编译它然后推断输出？

进入http://www.sassmeister.com/进行以下操作(.parent只是使用&父选择器所需的父规则)

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

看哪:

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

所以输出我们回到手头的问题

:没有( - 禁用):不( - 不活动):悬停

是

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

ERGO

任何.parent没有的.parent--disabled和.parent--inactive类将具有白色背景和灰色:hover

(.parent在这里只是一个例子-可能是div,#foo,...)