क्या SASS में किसी अन्य फ़ाइल में एक वर्ग से वारिस करना संभव है?

Question

बहुत सुंदर सवाल यह सब कहते हैं।

उदाहरण के लिए, अगर मैं ट्विटर बूटस्ट्रैप का उपयोग कर रहा हूं, तो क्या मैं अपनी SASS स्टाइलशीट में उन कक्षाओं को परिभाषित कर सकता हूं जो बूटस्ट्रैप के सीएसएस कक्षाओं से विरासत में मिले हैं? या SASS में विरासत केवल एक फ़ाइल के दायरे में काम करती है?

Answer 1

हाँ! यह संभव है।

यदि आप चाहते हैं कि सभी <button>तत्व ट्विटर बूटस्ट्रैप के डिफ़ॉल्ट बटन.btn से वर्ग का वारिस करें

अपनी styles.scssफ़ाइल में आपको पहले आयात करना होगा _bootstrap.scss:

@import "_bootstrap.scss";

फिर आयात से नीचे:

button { @extend .btn; }

Comments

मैं ऐसा करने के लिए बुरा महसूस करता हूं क्योंकि अन्य उत्तर बहुत अधिक इस सवाल का जवाब देते हैं (मैं थोड़ी देर के लिए वापस जांच करने के लिए उपेक्षित हो गया और फिर भूल गया); लेकिन मैं आपके उत्तर को स्वीकार कर रहा हूं क्योंकि यह सबसे पूर्ण है- यानी, यह पूरी प्रक्रिया के माध्यम से मुझे चलता है। धन्यवाद!

— दान ताओ

क्या यह केवल अन्य SCSS फ़ाइलों के साथ काम करता है? क्या आप CSS फाइलों के साथ ऐसा नहीं कर सकते?

— क्रश करें

जब आप @extendबूटस्ट्रैप / किसी फ्रेमवर्क के साथ उपयोग करते हैं तो सावधान रहें , क्योंकि यह आपकी अपेक्षा के अनुरूप काम नहीं कर सकता है। इस पोस्ट में उल्लिखित के बारे में कुछ बातें बताई गई हैं: stackoverflow.com/questions/30744625/…

— पेट्रीक अफेर्टेंजर

लेकिन क्या यह bootstrap.scss से CSS की नकल नहीं करता है, अगर आप अपने प्रोजेक्ट में कई फाइलों में ऐसा करते हैं?

— 9

इस आयात पूरी करता है bootstrap.cssमें styles.cssया बस .btn? मेरा मतलब आउटपुट बंडल में है? यदि यह संपूर्ण आयात करता है bootstrap.css, तो यह styles.cssअनावश्यक रूप से आकार में वृद्धि करेगा ।

— मैवरिक

Answer 2

** मैं गलत हो सकता हूं, लेकिन अगर मुझे वह मिलता है जो आप करने की कोशिश कर रहे हैं, तो क्या आप केवल @extend .classname;उस तत्व के अंदर कमांड का उपयोग नहीं कर सकते हैं जिसे आप विस्तारित करना चाहते हैं? स्वाभाविक रूप से, आपको अपडायबिलिटी को संरक्षित करने के लिए केवल अपने स्वयं के कोड को संशोधित करना चाहिए।

Answer 3

मेरी जानकारी के लिए, आपको@import उस फ़ाइल में उन कक्षाओं का उपयोग करना होगा जिन्हें आप अपनी SASS फ़ाइल में उपयोग करना चाहते हैं। हालाँकि, मैं एक SASS / SCSS विशेषज्ञ नहीं हूं, इसलिए किसी व्यक्ति को दूरस्थ रूप से इनका उपयोग करने का एक और तरीका पता हो सकता है कि मुझे इसके बारे में जानकारी नहीं है।

Answer 4

जैसा कि स्वीकृत उत्तर ने दिखाया है कि यह @import के साथ संभव है, हालांकि @import को sass द्वारा हटा दिया गया है

Sass टीम @import नियम के निरंतर उपयोग को हतोत्साहित करती है। सास धीरे-धीरे अगले कुछ वर्षों में इसे समाप्त कर देगी, और अंततः इसे पूरी तरह से भाषा से हटा देगी। इसके बजाय @use नियम को प्राथमिकता दें।

@ उपयोग नियम अब उपयोग के लिए बेहतर है, क्योंकि यह आयात (उपयोगकर्ता) मॉड्यूल के दायरे को प्रदूषित नहीं करता है। दुर्भाग्य से उपयोग नियम लिखने के समय केवल डार्ट सैस में लागू किया जाता है।