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

&字符具有this关键字的功能，实际上（在撰写答案时我不知道的事情）。可以这样写：

.class1 {
    &.class2 {}
}

，将生成的CSS将如下所示：

.class1.class2 {}

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

[原创回答]

LESS没有这种方式。

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

.class1 {
    .class2 {}
}

定义嵌套节点。 .class2仅在类似class1的节点的子节点时才会应用。

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

Answer 2

.g {
    &.posted {
    }
}

你应该添加“＆amp;”在.posted之前

Answer 3

如果＆符号位于嵌套子元素的旁边，则会将其编译为双类选择器。如果＆amp;之间有空间和选择器它将被编译成子选择器。在Less here。

中了解有关嵌套的更多信息

较少的CSS嵌套类

3 个答案: