คลาสการซ้อน 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;
         }
    }

ฉันต้องการที่จะรัง.postedใน.gแม้ว่า ความคิดใด ๆ ?

&ตัวละครที่มีฟังก์ชั่นของการเป็นthisคำหลักจริง (สิ่งที่ผมไม่ทราบว่าในช่วงเวลาของการเขียนคำตอบ) เป็นไปได้ที่จะเขียน:

.class1 {
    &.class2 {}
}

และ CSS ที่จะสร้างขึ้นจะมีลักษณะดังนี้:

.class1.class2 {}

สำหรับบันทึกนี้ @grobitto เป็นคนแรกที่โพสต์ข้อมูลนี้

[คำตอบเดิม]

LESS ไม่ทำงานด้วยวิธีนี้

.class1.class2 {} - กำหนดสองคลาสบนโหนด DOM เดียวกัน แต่

.class1 {
    .class2 {}
}

กำหนดโหนดที่ซ้อนกัน จะถูกนำมาใช้ถ้ามันเป็นลูกของโหนดกับการเรียน.class2class1

ฉันก็สับสนกับเรื่องนี้เช่นกันและข้อสรุปของฉันคือ LESS ต้องการthisคีย์เวิร์ด :)

.g {
    &.posted {
    }
}

คุณควรเพิ่ม "&" ก่อน. โพสต์

หากเครื่องหมายแอมเพอร์แซนด์อยู่ถัดจากองค์ประกอบลูกในการซ้อนจะคอมไพล์เป็นตัวเลือกคลาสสองชั้น หากมีช่องว่างระหว่าง & และตัวเลือกระบบจะรวบรวมไว้ในตัวเลือกลูก อ่านเพิ่มเติมเกี่ยวกับการทำรังในน้อยที่นี่