作者:判官-包公_529 | 来源:互联网 | 2023-02-08 12:09
我想了解这个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插件编译和缩小) .
任何帮助和建议将不胜感激.
1> birdspider..:
为什么不编译它然后推断输出?
进入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
,...)