Less 如何使用父选择器（非顶级）减少写入

如果我想用更少的时间编写以下CSS：

.foo{
   color:red;
}
.bar .foo{
   color:blue;
}

我可以写：

.foo{
  color:red;

  .bar&{
      color:blue;
   }
}

但是，如果我没有以下内容：

.top-level
   .foo{
     color:red;

     .bar&{
         color:blue;
      }
   }
}

这将产生一类：

.bar .top-level .foo

如何使

.bar

仅显示在

.foo

之上一级

例如：

.top-level .bar .foo

---

我能看到的唯一方法是以下代码片段，但它并不像我希望的那样整洁：

.top-level
   .foo{
     color:red;
   }
   .bar .foo{
      color:blue;
   }
}

---

我不知道如何避免使用多个选择器，但我相信重新排列选择器可能会使代码“更清晰”：

---

通过这种方式，您可以清楚地确定您的样式是基于父类的类

.foo

的两个实例。没有您想要的那么整洁，但仍然很酷。

可能使用了本文中提到的变量和选择器插值。不过，管道中有一个功能请求可能会使这更容易。

.foo {
  .top-level & {
    color: red;
  }

  .top-level .bar & {
    color:blue;
  }
}