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

麦角

没有.parent和.parent--disabled类的任何.parent--inactive在:hover上都会有白色背景和灰色

（.parent只是一个示例 - 可以是div，#foo，...）

SASS：使用组合＆amp ;:非选择器表达

1 个答案: