我使用LESS来改进我的CSS，并试图在类中嵌套一个类。有一个相当复杂的层次结构，但由于某种原因，我的嵌套不工作。
我有这个：
我有这个：
- .g {
- float: left;
- color: #323a13;
- .border(1px,#afc945);
- .gradient(#afc945,#c8da64);
- .common;
- span {
- .my-span;
- .border-dashed(1px,rgba(255,255,0.3));
- }
- .posted {
- .my-posted;
- span {
- border: none;
- }
- }
- }
我不能得到.g.posted工作。它只是显示.g位。
如果我这样做很好：
- .g {
- float: left;
- color: #323a13;
- .border(1px,0.3));
- }
- }
- .g.posted {
- .my-posted;
- span {
- border: none;
- }
- }
我想嵌套.posted在.g。有任何想法吗？
解决方法
LESS不工作这种方式。
.class1.class2 {} – 在同一个DOM节点上定义两个类，但是
- .class1 {
- .class2 {}
- }
定义嵌套节点。 .class2将仅在它是类class1的节点的子节点时应用。
我也困惑了这一点，我的结论是LESS需要一个这个关键字:)。
[编辑]
由于我已经downvote没有任何意见或理由，我觉得有义务对我感觉可能是downvote的原因作出反应。
&字符具有这个关键字的功能，实际上(在写答案的时候我不知道的东西)。可以写：
- .class1 {
- &.class2 {}
- }
并且生成的CSS将如下所示：
- .class.class2 {}
为了记录，@grobitto是第一个发布这条信息。
