सीएसएस घोंसले के शिकार वर्गों को कम करें

Question

मैं अपने CSS को बेहतर बनाने के लिए LESS का उपयोग कर रहा हूं और एक वर्ग के भीतर एक वर्ग को घोंसला बनाने की कोशिश कर रहा हूं। काफी जटिल पदानुक्रम है, लेकिन किसी कारण से मेरा घोंसला काम नहीं करता है। मेरे पास यह है:

.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 {}
}

और उत्पन्न होने वाली सीएसएस इस तरह दिखाई देगी:

.class1.class2 {}

रिकॉर्ड के लिए, @grobitto जानकारी के इस टुकड़े को पोस्ट करने वाला पहला था।

---

[मूल उत्तर]

कम इस तरह से काम नहीं करता है।

.class1.class2 {} - एक ही डोम नोड पर दो वर्गों को परिभाषित करता है, लेकिन

.class1 {
    .class2 {}
}

नेस्टेड नोड्स को परिभाषित करता है। .class2केवल तभी लागू किया जाएगा जब वह कक्षा के साथ नोड का बच्चा हो class1।

मुझे इस पर भी भ्रम हुआ है और मेरा निष्कर्ष यह है कि LESS को एक thisकीवर्ड की आवश्यकता है :)।

Comments

sassउस कार्यक्षमता को & ऑपरेटर के साथ बनाया गया है।

— sevenseacat

LESS अभी भी कमाल है, विशेष रूप से PHP LESS प्रीप्रोसेसर, इसके संशोधित, अधिक लचीले सिंटैक्स के साथ। लेकिन जब तक आम तौर पर स्वीकार किए गए वाक्यविन्यास के कुछ प्रकार होते हैं, तब तक ऐसी समस्याएं समय-समय पर उत्पन्न होती रहेंगी। मेरे विचार में, यह कम से कम केवल एक दोष है।

— मिंगोस

@ newbie_86 आप sass और देशी css सिंटैक्स को नहीं मिला सकते हैं। इसलिए सैस में माइग्रेट करने के लिए आपकी शैलियों के पूर्ण पुन: लिखने की आवश्यकता होती है, जबकि इससे कम में आप पहले से ही अपनी मौजूदा शैलियों को संकलित कर सकते हैं और उन्हें फिर से लिखना शुरू कर सकते हैं।

— टॉपलेस

मैं उत्सुक था कि दूसरे उत्तर में इस की तुलना में अधिक अप क्यों है, इसके बावजूद एक ही है और बाद की तारीख है। फिर मैंने आखिरी वाक्य देखा और दोनों जवाबों को

— उलट दिया

@topless आपका क्या मतलब है "आप sass और देशी css सिंटैक्स को मिक्स नहीं कर सकते हैं" मैं इसे सालों से कर रहा हूं। मेरे लिए महान काम करता है।

— शनीमल

Answer 2

.g {
    &.posted {
    }
}

आपको .posted से पहले "&" जोड़ना चाहिए

Answer 3

यदि एम्परसेंड घोंसले में बच्चे के तत्व के ठीक बगल में स्थित है, तो इसे दोहरे वर्ग के चयनकर्ता में संकलित किया जाता है। अगर & चयनकर्ता के बीच जगह है तो इसे चाइल्ड सेलेक्टर में संकलित किया जाएगा। कम में घोंसला बनने के बारे में और अधिक पढ़ें यहाँ ।