LESS CSS嵌套类

我正在使用LESS来改进我的CSS，并试图在一个类中嵌套一个类。 有一个相当复杂的层次结构，但由于某种原因，我的嵌套不起作用。 我有这个：

.g { float: left; color: #323a13; .border(1px,#afc945); .gradient(#afc945, #c8da64); .common; span { .my-span; .border-dashed(1px,rgba(255,255,255,0.3)); } .posted { .my-posted; span { border: none; } } } 

我无法使用.g.posted工作。 它只是显示.g位。 如果我这样做很好：

 .g { float: left; color: #323a13; .border(1px,#afc945); .gradient(#afc945, #c8da64); .common; span { .my-span; .border-dashed(1px,rgba(255,255,255,0.3)); } } .g.posted { .my-posted; span { border: none; } } 

但是我想嵌套在.posted中。 有任何想法吗？

Answer 1

[编辑答案]

由于我没有任何评论和理由而被低估，我觉得有必要对我认为可能是倒退的原因作出反应。

&字符具有this关键字的function，实际上（我在写这个答案的时候并不知道）。 有可能写：

 .class1 { &.class2 {} } 

生成的CSS将如下所示：

 .class.class2 {} 

logging，@grobitto是第一个发布这条信息。

[原文答案]

LESS不这样工作。

.class1.class2 {} – 在同一个DOM节点上定义了两个类，但是

 .class1 { .class2 {} } 

定义嵌套节点。 .class2只会应用于类class1的节点的子节点。

我也一直困惑，我的结论是，LESS需要一个关键字:)。

Answer 2

 .g { &.posted { } } 

您应该在.posted之前添加“＆”