我使用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是第一个发布这条信息。