较少的祖父母具有类选择器

Question

我有一个类似的课程：

.item
{
    svg
    {
        fill: var(--theme-font-color-extra-light);
    }

    &.active
    {
        svg
        {
            fill: var(--theme-main-color);
        }
    }
}

是否有任何选择器或方法可达到相同的结果，但以下内容与以下代码类似：

.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);
        }
    }
}

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