SASS |针对孩子的父母

Question

我如何针对孩子的父母班？

我尝试使用@at-root，但是它没有指定父类，而是分配了有史以来的第一个类。

我举了一个小例子：

.parent {
  .child {
    .subchild {
      &:hover {
        border: 1px solid white;
        @at-root .toggle#{&} {
          border: 1px solid yellow;
        }
      }
    }
  }
}

我想要的（css）：

.parent .child .subchild:hover {
  border: 1px solid white;
}

.parent .child.toggle .subchild:hover {
  border: 1px solid yellow;
}

我得到的（css）：

.parent .child .subchild:hover {
  border: 1px solid white;
}

.toggle.parent .child .subchild:hover {
  border: 1px solid yellow;
}

基本思想，我想要实现的目标：

如果.child类也具有.toggle类，则将鼠标悬停时将边框设置为黄色，但其他情况下将边框设置为白色。

我可以这样做：

.parent {
  .child {
    .subchild {
      &:hover {
        border: 1px solid white;
      }
    }
    &.toggle {
      .subchild {
        &:hover {
          border: 1px solid yellow;
        }
      }
    }
  }
}

但这是重复性的，需要大量的写作。

tl; dr

如何指定希望定位的愿望父元素？

编辑：这个想法来自另一个CSS框架，允许您使用箭头函数^ []并指定要定位的后退步骤。例如：^ [1] .toggle {}