LESS CSS nesting classes

我正在使用 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;
}
}

我想在 .g中嵌套 .posted。有什么想法吗？

87978

小开

最佳答案

实际上，&字符具有 this关键字的功能(这是我在写答案时不知道的)。可以这样写:

.class1 {
&.class2 {}
}

生成的 CSS 如下所示:

.class1.class2 {}

For the record, @grobitto was the first to post this piece of information.

[原始答案]

这样是不行的。

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

.class1 {
.class2 {}
}

defines nested nodes. .class2 will only be applied if it is a child of a node with the class class1.

我也对此感到困惑，我的结论是 LESS 需要一个 this关键字:)。