सीएसएस-कम वर्ग छद्म वर्ग के साथ वर्ग का विस्तार

Question

मैं सोच रहा था कि कैसे मैं कम सीएसएस के साथ निम्नलिखित की तरह कुछ कर सकता है: यह सिर्फ एक उदाहरण है, क्या बात करने के लिए अगर वहाँ की जरूरत है

.btn { 
    color : black; 
} 

.btn:hover { 
    color : white; 
} 

.btn-foo { 
    .btn; 
    &:hover { 
    .btn:hover; 
    } 
} 

के पाठ्यक्रम

:hover छद्म वर्ग के गुणों को फिर से टाइप करने से बचने के लिए छद्म-वर्ग का विस्तार करने का कोई तरीका है, मुझे हर जगह की आवश्यकता है। मुझे पता है कि मैं इसके लिए एक मिश्रण बना सकता हूं लेकिन मुझे आश्चर्य है कि क्या मैं इससे बच सकता हूं।

धन्यवाद

Answer 1

अद्यतन: यदि आप बाहरी फ़ाइलें संशोधित नहीं कर सकते हैं, बस चयनकर्ताओं को फिर से परिभाषित है, और याद आ रही राज्यों जोड़ें:

.btn { 
    // not adding anything here, won't affect existing style 
    &:hover { 
    // adding my own hover state for .btn 
    background: yellow; 
    ... 
    } 
} 

// this will make your foo button appear as in external style 
// and have the :hover state just as you defined it above 
.btn-foo { 
    .btn; 
} 

बेहतर अब? :)

---

आपको छद्म वर्ग की आवश्यकता नहीं है। यह सिर्फ काम करेंगे :)

इस प्रयास करें:

.btn { 
    background: yellow; 

    &:hover { // define hover state here 
    background: green; 
    } 
} 

button { 
    .btn; 
} 

प्रत्येक तत्व आप प्राप्त कर लेंगे बनाने जो कुछ होवर स्थिति सहित परिभाषित किया गया था,। मुझे लगता है कि यह कम की मुख्य अद्भुत विशेषताओं में से एक है।

उम्मीद है कि इससे मदद मिलती है।

Answer 2

कम 1.4.0 में

यह (1.4.1?):

.btn { 
    color : black; 
} 

.btn:hover { 
    color : white; 
} 

.btn-foo:extend(.btn all) { 
} 

इस पर विस्तृत होता:

.btn, 
.btn-foo { 
    color: black; 
} 
.btn:hover, 
.btn-foo:hover { 
    color: white; 
} 

हालांकि सतर्क रहें, इस:

.btn { 
    color : black; 
} 

.btn:hover { 
    color : white; 
} 

.abc .btn { 
    margin: 2px; 
} 

.btn-foo:extend(.btn all) { 

} 

विल उत्पादन इस:

.btn { 
    color : black; 
} 

.btn:hover { 
    color : white; 
} 

.abc .btn { 
    margin: 2px; 
} 

.btn-foo:extend(.btn all) { 

} 

मैंने एसएएसएस में आधा घंटे से अधिक नहीं देखा है, लेकिन मेरा मानना ​​है कि बाद का मामला इसका डिफ़ॉल्ट (या केवल) @extend व्यवहार है।