css - LESS 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

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

.class1 {
    &.class2 {}
}

将生成的 CSS 如下所示：

.class1.class2 {}

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

---

[原始答案]

LESS 不能以这种方式工作。

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

.class1 {
    .class2 {}
}

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

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

Answer 2

.g {
    &.posted {
    }
}

您应该在 .posted 之前添加“&”

Answer 3

如果＆符号位于嵌套中的子元素旁边，则将其编译为双类选择器。如果 & 和选择器之间有空格，它将被编译成子选择器。在此处阅读有关少嵌套的更多信息。