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

回答

相關問題