如何使用父选择器（非顶级）编写 LESS答案

【问题标题】：How to write LESS with a parent selector (not top-level)如何使用父选择器（非顶级）编写 LESS
【发布时间】：2015-02-24 01:19:44
【问题描述】：

如果我想在 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

我能看到的唯一方法是使用以下代码 sn-p，但它并不像我想要的那样整洁：

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

【问题讨论】：

标签： less

【解决方案1】：

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

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

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

通过这种方式，您可以清楚地确定您的样式是基于类.foo 的两个实例的父对象。没有你想要的那么整洁，但仍然很酷。

【讨论】：