更少的祖父母有 class 个选择器

Question

我有一个 class 像：

.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 在评论中指出的那样，在这种情况下没有选择器来实现这样的事情。

Answer 1

少

您可以使用 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;
    }
  }
}

更少的祖父母有 class 个选择器

Less grandparent has class selector

css

sass

less