सीएसएस - कम वर्ग विरासत

Question

मैं twitter bootstrap से शैलियों का उपयोग कर रहा हूं और विरासत के बारे में एक प्रश्न पूछ रहा हूं।

मैं दो लेबल वर्ग बनाना चाहता हूं जो बूटस्ट्रैप से लेबल शैलियों का उत्तराधिकारी बनेंगे।

.label-new { 
    .label; .label-important; 
} 
.label-updated { 
    .label; .label-warning; 
} 

हालांकि, ऊपर कम पार्स त्रुटि में परिणाम होगा "NameError: .label महत्वपूर्ण अपरिभाषित है" क्योंकि .label महत्वपूर्ण और .label चेतावनी का उपयोग कर परिभाषित कर रहे हैं बूटस्ट्रैप में निम्नलिखित:

.label, 
.badge { 
    // Important (red) 
    &-important   { background-color: @errorText; } 
    &-important[href] { background-color: darken(@errorText, 10%); } 
    // Warnings (orange) 
    &-warning   { background-color: @orange; } 
    &-warning[href]  { background-color: darken(@orange, 10%); } 
} 

क्या लेबल-महत्वपूर्ण/चेतावनी के उत्तराधिकारी के लिए कोई विशेष वाक्यविन्यास है?

अग्रिम धन्यवाद।

Answer 1

मुझे लगता है कि आप केवल .label जो .label-new-important और .label-new-warning (और updated के लिए बराबर) देना चाहिए वारिस कर सकते हैं। यदि यह वांछनीय नहीं है, और आप नए जोड़े गए एक्सटेंशन चाहते हैं, तो आपको शायद .label के लिए रंगों को फिर से परिभाषित करने की आवश्यकता है ताकि आप जो चाहते हैं उसे अलग और परिभाषित कर सकें। इसलिए जैसा:

.label { 
    // New (red) 
    &-new   { background-color: @errorText; } 
    &-new[href]  { background-color: darken(@errorText, 10%); } 
    // Updated (orange) 
    &-updated  { background-color: @orange; } 
    &-updated[href] { background-color: darken(@orange, 10%); } 
} 

संपादित

रंगों की एक पुनर्परिभाषित से बचने के लिए (आप रंग को फिर से परिभाषित लेकिन एक mixin का उपयोग नहीं करना चाहते हैं), तो आप मूल परिभाषा बदलने की जरूरत है, और ऐसा करते हैं:

पहले, मूल .label और .badge परिभाषाओं दूसरे को हटाने के बाद, इसलिए की तरह अधिक स्पष्ट रूप से उन्हें निर्धारित करें:

.label-important, 
.badge-important { 
    // Important (red) 
    { background-color: @errorText; } 
    { background-color: darken(@errorText, 10%); } 
} 

.label-warning, 
.badge-warning { 
    // Warnings (orange) 
    { background-color: @orange; } 
    { background-color: darken(@orange, 10%); } 
} 

.label-new { 
    .label-important; 
} 

.label-updated { 
    .label-warning; 
}