2011-02-25 18 views
86

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

.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 हालांकि करना चाहते हैं। कोई विचार?

उत्तर

170

[संपादित उत्तर]

जैसा कि मैंने किसी भी टिप्पणी या औचित्य के बिना downvoted किया गया है, मुझे लगता है मैं क्या महसूस downvote का कारण हो सकता है की तरह करने के लिए प्रतिक्रिया करने के लिए बाध्य महसूस करते हैं।

& चरित्र में this कीवर्ड का कार्य है, वास्तव में (एक चीज़ जो मुझे उत्तर लिखने के पल में नहीं पता था)। यह संभव है लिखने के लिए:

.class1 { 
    &.class2 {} 
} 

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

.class.class2 {} 

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

[मूल जवाब]

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

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

.class1 { 
    .class2 {} 
} 

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

मैं इसके साथ भी उलझन में हूं और मेरा निष्कर्ष यह है कि कम को this कीवर्ड की आवश्यकता है :)।

+5

'sass' की कार्यक्षमता और ऑपरेटर के साथ बनाई गई कार्यक्षमता है। – sevenseacat

+0

एए, नं। मैंने सोचा था कि अब तक कम अद्भुत था ... धन्यवाद –

+2

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

108
.g { 
    &.posted { 
    } 
} 

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

1

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

संबंधित मुद्दे