如何用父选择器（不是顶级）编写LESS

Question

如果我想在LESS中编写以下CSS：

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

我可以写：

.foo{
  color:red;

  .bar&{
      color:blue;
   }
}

但如果我有以下LESS：

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

Answer 1

我不知道如何在这里避免使用多个选择器，但是我相信重新安排选择器可能会使代码更清晰＆＃34; ：

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

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

通过这种方式，您可以根据父母的要求清楚地识别出类.foo的两个实例样式。不像你想要的那样整洁，但还是很酷。