更少的 CSS 嵌套类 [英] LESS CSS nesting classes

问题描述

我正在使用 LESS 来改进我的 CSS 并试图在一个类中嵌套一个类.有一个相当复杂的层次结构，但由于某种原因，我的嵌套不起作用.我有这个:

I'm using LESS to improve my CSS and am trying to nest a class within a class. There's a fairly complicated hierarchy but for some reason my nesting doesn't work. I have this:

.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 位.如果我这样做就好了:

I can't get the .g.posted to work. it just shows the .g bit. If i do this it's fine:

.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 中.有什么想法吗?

I'd like to nest the .posted in .g though. Any ideas?

推荐答案

& 字符具有 this 关键字的功能，实际上(我没有在写答案的那一刻就知道了).可以这样写:

The & character has the function of a this keyword, actually (a thing I did not know at the moment of writing the answer). It is possible to write:

.class1 {
    &.class2 {}
}

生成的 CSS 如下所示:

and the CSS that will be generated will look like this:

.class1.class2 {}

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

For the record, @grobitto was the first to post this piece of information.

[原答案]

LESS 不是这样工作的.

LESS doesn't work this way.

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

.class1.class2 {} - defines two classes on the same DOM node, but

.class1 {
    .class2 {}
}

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

defines nested nodes. .class2 will only be applied if it is a child of a node with the class class1.

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

I've been confused with this too and my conclusion is that LESS needs a this keyword :).

这篇关于更少的 CSS 嵌套类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！