एससीएसएस में एक और वर्ग शामिल है

Question

मेरी SCSS फ़ाइल में यह है:

.class-a{
  display: inline-block;
  //some other properties
  &:hover{
   color: darken(#FFFFFF, 10%);
 }  
}

.class-b{

 //Inherite class-a here

 //some properties
}

वर्ग-बी में, मैं सभी संपत्तियों और निहित घोषणाओं को विरासत में देना चाहूंगा class-a। यह कैसे किया जाता है? मैंने प्रयोग करने की कोशिश की @include class-a, लेकिन संकलन करते समय सिर्फ एक त्रुटि हुई।

Answer 1

लगता है @mixinऔर @includeइस तरह के एक साधारण मामले के लिए आवश्यक नहीं हैं।

एक ही कर सकता है:

.myclass {
  font-weight: bold;
  font-size: 90px;
}

.myotherclass {
  @extend .myclass;
  color: #000000;
}

Comments

@ कस्टम ठीक काम करता है, लेकिन काम नहीं करेगा अगर या तो कक्षाएं एक निर्देश के भीतर हैं (आमतौर पर एक मीडिया क्वेरी); जब तक कि वे दोनों एक ही निर्देश में न हों।

— मार्टिन एंस्टी

यहां देखें कुछ मजेदार तथ्यों के बारे में @extend- कुछ ऐसे दुष्परिणाम हैं जिनसे आपको अवगत होना चाहिए: stackoverflow.com/questions/30744625/…

— Toni Leigh

धन्यवाद @ToniLeigh, PlaceHolder के दिलचस्प हैं क्योंकि वे एक अतिरिक्त सीएसएस चयनकर्ता की पीढ़ी को बचाते हैं यदि माता-पिता चयनकर्ता को केवल विस्तारित करने के लिए उपयोग किया जाता है (कहीं भी उपयोग नहीं किया जाता है)। जैसा उदाहरण में ऊपर .myclassकहीं और नहीं किया जाता है (मुझे लगता है) अलग से .myotherclassहै, तो यह है करने के लिए बेहतर है .myclassके रूप में परिभाषित %myclassऔर में विस्तारित .myotherclassरूप में @extend %myclass;। यह उत्पन्न होगा.myotherclass{ font-weight: bold; font-size: 90px; color: #000000; }

— अभिजीत

प्लेस होल्डर का उपयोग करने का उदाहरण

— अभिजीत

@MartinAnsty खैर, यह बेकार है।

— अब्राम

Answer 2

इसे इस्तेमाल करे:

1. सामान्य गुणों के साथ प्लेसहोल्डर बेस क्लास (% बेस-क्लास) बनाएं
2. इस प्लेसहोल्डर के साथ अपने वर्ग (.my-base-class) का विस्तार करें।

3. अब आप अपनी किसी भी कक्षा (जैसे .my-class) में% आधार-वर्ग का विस्तार कर सकते हैं।

   %base-class {
      width: 80%;
      margin-left: 10%;
      margin-right: 10%;
   }
   
   .my-base-class {
       @extend %base-class;
   }
   
   .my-class {
       @extend %base-class;
       margin-bottom: 40px;
   }
   

Comments

मुझे लगता है कि यह उत्तर सबसे लोकप्रिय के समान है। क्या मैं सही हू?

— येवगेनी अफानसेव

@Yevgeniy Afanasyev नहीं, आप सीधे एक वर्ग का विस्तार नहीं करते हैं, लेकिन आप सीधे एक प्लेसहोल्डर का विस्तार कर सकते हैं।

— अश्विन

यह कभी नहीं पूछा गया था :(

— येवगेनी अफनासयेव

@ यवगेनी अफनासयेव ने सीधे वर्ग (सबसे लोकप्रिय उत्तर) का विस्तार किया, मेरे लिए काम नहीं किया, लेकिन एक प्लेसहोल्डर का विस्तार किया। इसलिए मैंने उत्तर पोस्ट किया क्योंकि यह वही उत्तर नहीं है।

— अश्विन

वैकल्पिक उत्तर पोस्ट करने के लिए धन्यवाद, लेकिन यह आपके उत्तर से स्पष्ट नहीं है कि हमें इसकी आवश्यकता क्यों है। यदि आप कृपया इस दृष्टिकोण के उपयोग के मामले या लाभों को स्पष्ट करने के लिए अधिक तर्क जोड़ सकते हैं, तो इसकी सराहना की जाएगी। धन्यवाद।

— येवगेनी अफनसेव

Answer 3

@ कस्टम का उपयोग करना एक अच्छा समाधान है, लेकिन इस बात का ध्यान रखें कि संकलित सीएसएस कक्षा की परिभाषा को तोड़ देगा। समान प्लेसहोल्डर का विस्तार करने वाले किसी भी वर्ग को एक साथ समूहीकृत किया जाएगा और जो नियम कक्षा में विस्तारित नहीं किए गए हैं वे एक अलग परिभाषा में होंगे। यदि कई वर्ग विस्तारित हो जाते हैं, तो संकलित सीएसएस या देव टूल्स में चयनकर्ता को देखना अनियंत्रित हो सकता है। जबकि एक मिक्सिन मिश्रण कोड को डुप्लिकेट करेगा और किसी भी अतिरिक्त शैलियों को जोड़ देगा।

आप इस sassmeister में @extend और @mixin के बीच अंतर देख सकते हैं

Comments

Sassmeister लिंक टूट गया है।

— लेक्सीहैंकिन्स

Answer 4

@extend .myclass;
@extend #{'.my-class'};

Comments

हालांकि यह कोड प्रश्न का उत्तर दे सकता है, लेकिन यह कोड क्यों और / या इस बारे में अतिरिक्त संदर्भ प्रदान करता है कि यह प्रश्न इसके दीर्घकालिक मूल्य में सुधार करता है।

— अदिगा

@extend #{'.my-class', '.my-other-class'};

— अरारियो

यहाँ हैशबैंग का अर्थ क्या है?

— कोनराड विल्टर्स्टन

Answer 5

एक अन्य विकल्प एक गुण चयनकर्ता का उपयोग कर सकता है:

[class^="your-class-name"]{
  //your style here
}

जबकि "आपका वर्ग-नाम" से शुरू होने वाला हर वर्ग इस शैली का उपयोग करता है।

तो आपके मामले में, आप ऐसा कर सकते हैं:

[class^="class"]{
  display: inline-block;
  //some other properties
  &:hover{
   color: darken(#FFFFFF, 10%);
 }  
}

.class-b{
  //specifically for class b
  width: 100px;
  &:hover{
     color: darken(#FFFFFF, 20%);
  }
}

W3Schools पर चयनकर्ताओं के बारे में अधिक जानकारी