CSS @import नियम का उपयोग कैसे करें

CSS @import नियम का उपयोग करने का तरीका जानें स्टाइलशीट आयात करने के लिए।

CSS @import at-rule आपको CSS स्टाइलशीट को अन्य CSS स्टाइलशीट में आयात करने की अनुमति देता है। यह बड़े/बढ़ते कोडबेस वाली वेबसाइटों के लिए व्यावहारिक है।

मूल उपयोग:

@import url(variables.css);

यह विधि आपको अपनी सीएसएस शैलियों को चर, टाइपोग्राफी, रंग, रिक्ति आदि के लिए अलग-अलग फाइलों में अलग करने की अनुमति देती है - जैसा कि आपकी सभी शैलियों को एक बड़ी स्टाइलशीट में रखने के विपरीत है।

फिर आप उन सभी को एक साथ जोड़ने के लिए अपनी सभी व्यक्तिगत CSS फाइलों को अपनी मुख्य CSS स्टाइलशीट में आयात कर सकते हैं:

/* Your main.css CSS file */
@import url(variables.css);
@import url(elements.css);
@import url(colors.css);
@import url(typography.css);
@import url(spacing.css);

जैसे-जैसे आपका कोडबेस समय के साथ बढ़ता है, सब कुछ साफ-सुथरा रखने का यह एक व्यावहारिक तरीका है।

@import का उपयोग करते समय महत्वपूर्ण

@import . का उपयोग करते समय जानने योग्य सबसे महत्वपूर्ण बात यह है कि आपको अपना @import . डालना होगा आपके मुख्य . के शीर्ष पर कथन CSS फ़ाइल (वह जिसमें आप अपनी सभी CSS फ़ाइलें आयात करते हैं)।

उदाहरण:

/* 
Your main.css CSS file 
Don’t add CSS above your import statements! 
*/
@import url(variables.css);
@import url(elements.css);
@import url(colors.css);
@import url(typography.css);
@import url(spacing.css);

/* 
You can add CSS below
*/

.other-stuff {
    padding: 16px;
    background-color: blue;
}

अगर आप @import . के ऊपर कोई CSS स्टाइल (अपनी मुख्य CSS फाइल में) डालते हैं बयानों पर ध्यान नहीं दिया जाएगा।

मीडिया क्वेरी के साथ @import का उपयोग करना

आप @import . का भी उपयोग कर सकते हैं सशर्त रूप से CSS स्टाइलशीट आयात करने के लिए कथन। उदाहरण के लिए, यदि आपके पास एक विशिष्ट स्टाइलशीट है जो केवल स्मार्टफोन की तरह छोटी स्क्रीन पर लोड होनी चाहिए, तो आप अपने @import में मीडिया प्रश्नों को जोड़कर इसे नियंत्रित करते हैं। बयान:

@import "mobile.css" screen and (max-width: 768px);

ऊपर के उदाहरण में, mobile.css स्टाइलशीट केवल 768 पिक्सेल की अधिकतम-चौड़ाई वाली स्क्रीन पर प्रभावी होगी।