SimpleLESS 中的嵌套 & 符号答案

【问题标题】：Nested ampersands in SimpLESSSimpleLESS 中的嵌套 & 符号
【发布时间】：2013-06-18 21:59:00
【问题描述】：

我正在用SimpLESS 编译我的LESS，但遇到了我认为& 组合器使用方式的错误。这是标记：

<div class="parent">
  <div class="child-1 child-2">
    Hello
  </div>
</div>

以及基本的LESS代码：

.child-1 {
  color: red;
    .parent & {
    color: yellow;
    &.child-2 {
      color: blue;
    }
  }
}

预期的 CSS 输出：

.child-1 {
  color: red;
}
.parent .child-1 {
  color: yellow;
}
.parent .child-1.child-2 {
  color: blue;
}

SimpLESS 的实际输出：

.child-1 {
  color: red;
}
.parent .child-1 {
  color: yellow;
}
.parent .child-1 .child-2 { // extra space between .child-1 and .child-2
  color: blue;
}

如您所见，“Hello”是黄色还是蓝色的区别。哪个是正确的 LESS 编译？为什么 SimpleLESS 会出错？

【问题讨论】：

标签： css less ampersand

【解决方案1】：

正确的输出是

.child-1 {
  color: red;
}
.parent .child-1 {
  color: yellow;
}
.parent .child-1.child-2 {
  color: blue;
}

所以你对你的期望是正确的。您可以仔细检查您是否访问http://less2css.org/，它是http://lesscss.org/ 上“立即尝试”下链接的站点。

所以您可能在 SimpLESS 解析器中发现了一个错误。

【讨论】：