<分区>
css - 更少的祖 parent 有类选择器
我有一个类:
.item
{
svg
{
fill: var(--theme-font-color-extra-light);
}
&.active
{
svg
{
fill: var(--theme-main-color);
}
}
}
是否有任何选择器或方法可以实现相同的结果，但在 less 中使用类似于以下代码的内容:
.item
{
svg
{
fill: var(--theme-font-color-extra-light);
@selector executed if div having .item also has .active (.item.active)
{
fill: var(--theme-main-color);
}
}
}
[编辑 2019 年 12 月 11 日]
使用以下代码不起作用:
.item
{
svg
{
fill: var(--theme-font-color-extra-light);
.active&
{
fill: var(--theme-main-color);
}
}
}
我对为什么它不起作用感到有点困惑，但显然 VS Code 告诉我这段代码被转换为:
(没有工具提示):
[编辑 2019 年 12 月 12 日]
完整的代码块如下所示:
正如@chazsolo 在评论中指出的那样，在这种情况下没有选择器来实现这样的事情。
最佳答案
少
您可以使用 parent selector要实现这一点 - 只需注意 &
.item {
svg {
fill: red;
.active& { // <-- no space between .active and &
fill: blue;
}
}
}
这里有一些示例，说明更改位置将如何更改已评估的选择器:
.active& // .active.item svg (what you want)
.active & // .active .item svg
&.active // .item svg.active
& .active // .item svg .active
SASS
请注意，在 SASS (yet) 中不允许将 & 放在复合选择器的末尾。
但是，您可以使用 @at-root 指令获得相同的输出:
.item {
svg {
fill: red;
@at-root .active#{&} { // <-- directive + interpolation #{&}
fill: blue;
}
}
}
关于css - 更少的祖 parent 有类选择器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59284945/