更少的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在.g虽然。有任何想法吗？

该&角色具有的功能this关键字，居然（事我不知道在写答案的时刻）。可以这样写：

.class1 {
    &.class2 {}
}

并且将生成的CSS如下所示：

.class1.class2 {}

作为记录，@ grobitto是第一个发布此信息的站点。

[原始答案]

LESS不能以这种方式工作。

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

.class1 {
    .class2 {}
}

定义嵌套节点。.class2仅当它是具有class的节点的子节点时才应用class1。

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

.g {
    &.posted {
    }
}

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

如果＆符位于嵌套子元素的旁边，则将其编译为双精度类选择器。如果＆和选择器之间有空格，它将被编译为子选择器。在此处了解有关嵌套的更多信息。