较少的CSS嵌套类

Question

我正在使用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.有任何想法吗？

Answer 1

[编辑答案]

由于我没有任何评论或理由而被投票,我觉得有必要对我认为可能是downvote的原因作出反应.

该&角色具有this关键字的功能,实际上(在撰写答案时我不知道的事情).有可能写:

.class1 {
    &.class2 {}
}

生成的CSS将如下所示:

.class1.class2 {}

为了记录,@ grobitto是第一个发布这条信息的人.

[原始答案]

LESS没有这种方式.

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

.class1 {
    .class2 {}
}

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

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

Answer 2

.g {
    &.posted {
    }
}

你应该在.posted之前添加"&"