LESS CSS嵌套类

我正在使用LESS来改进我的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; 
     } 
    }

我想窝在.g的.posted虽然。有任何想法吗？

来源

2011-02-25 newbie_86

170

将帖子答案】

正如我已经没有任何评论或理由downvoted，我觉得有必要向我觉得像可能是downvote事业做出反应。

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

.class1 { 
    &.class2 {} 
}

和生成的CSS看起来就像这样：

.class.class2 {}

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

[原来的答案]

LESS不会以这种方式工作。

.class1.class2 {} - 定义了相同的DOM节点上两个类，但

.class1 { 
    .class2 {} 
}

限定嵌套节点。 .class2仅适用于类别为class1的节点的子节点。

我也一直困惑这一点，我的结论是，减少需要一个this关键字:)。

来源

2011-02-25 12:22:13 mingos

'sass'具有与＆运算符一起构建的那个功能。 – sevenseacat 2011-02-25 12:27:54

awww，no。我想象的那样是真棒直到现在...感谢 – 2011-02-25 13:06:18

LESS仍然是真棒，尤其是PHP LESS预处理，其改进，更加灵活的语法。但是，除非有某种普遍接受的语法，否则这些问题会不时出现。在我看来，这是LESS唯一的缺点。 – mingos 2011-02-25 13:35:22

108

.g { 
    &.posted { 
    } 
}

你应该添加“&”之前.posted

来源

2011-03-27 18:27:55 grobitto

如果符号位于旁边的子元素嵌套，它被编译成一个双类选择。如果在&和选择器之间存在空间，则它将被编译到子选择器中。有关嵌套的更多信息，请参阅Less here。

来源

2018-02-21 08:20:42

回答

相关问题