सस @import और पार्टियल

Sass CSS कोड को ड्राई कर सकता है (DRYDon't Repeat Yourself, न दोहराएं।

DRY कोड लिखने के एक तरीका यह है कि संबंधित कोड को अलग फ़ाइल में भंडारित करना।

आप CSS शीर्षक का उपयोग करके छोटे फ़ाइलें बना सकते हैं और दूसरे Sass फ़ाइलों में शामिल कर सकते हैं। उदाहरण के लिए, इस तरह के फ़ाइलें हो सकती हैं: रीसेट फ़ाइल, वारियेबल, रंग, फ़ॉन्ट आदि。

Sass फ़ाइल इम्पोर्ट

जैसा कि CSS की तरह, Sass भी @import आदेश。

@import आदेश आपको एक फ़ाइल के सामग्री को दूसरे फ़ाइल में शामिल करने की अनुमति देता है。

संभावना से, CSS @import आदेश का एक प्रमुख नाकारात्मक है; इसे हर बार आमंत्रित करते समय एक अतिरिक्त HTTP अनुरोध बनाया जाता है। लेकिन, Sass @import आदेश फ़ाइल को CSS में शामिल करता है; इसलिए, चलाने के समय अतिरिक्त HTTP कॉल की जरूरत नहीं है!

Sass इम्पोर्ट ग्रामेटिकी:

@import filename;

सूचना:आपको फ़ाइल एक्सटेंशन नहीं निर्दिष्ट करना होगा, Sass स्वत: आपको .sass या .scss फ़ाइलों को संदिग्ध करेगा। आप एक्सटेंशन को इम्पोर्ट कर सकते हैं।@import आदेश फ़ाइलों को इम्पोर्ट करता है, और फ़ाइलों में वर्णन की जाने वाली किसी भी वारियेबल या mixin का उपयोग कर सकते हैं।

आप मुख्य फ़ाइल में किसी भी संख्या के फ़ाइलों को इम्पोर्ट कर सकते हैं:

इनस्टैंस

@import "variables";
@import "colors";
@import "reset";

हम एक उदाहरण देखें: आधार में, हमें एक नाम "reset.scss" वाला रीसेट फ़ाइल है, जो इस तरह दिखता है:

SCSS ग्रामेटिकी (reset.scss):

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

अब हम "reset.scss" फ़ाइल को एक अन्य फ़ाइल "standard.scss" में इम्पोर्ट करना चाहते हैं。

हम इस तरह करते हैं: आमतौर पर फ़ाइल के शीर्ष में जोड़ा जाता है @import आदेश; इसकी सामग्री को वैश्विक क्षेत्राकार रखा जाएगा:

SCSS ग्रामेटिकी (standard.scss):

@import "reset";
बॉडी {
  फ़ॉन्ट-फ़ैमिली: हेलवेटिका, सैन्स-सरिफ़;
  फ़ॉन्ट-साइज़: 18पिक्सल;
  color: red;
}

तथापि, जब "standard.css" फ़ाइल ट्रांसलेशन की जाती है, CSS इस तरह दिखेगा:

CSS आउटपुट：

html, body, ul, ol {
  margin: 0;
  padding: 0;
}
बॉडी {
  फ़ॉन्ट-फ़ैमिली: हेलवेटिका, सैन्स-सरिफ़;
  फ़ॉन्ट-साइज़: 18पिक्सल;
  color: red;
}

Sass Partials (लोकल फ़ाइलें)

मूवल्य रूप से, Sass सीधे सभी .scss फ़ाइलें ट्रांसलेशन करता है। लेकिन, फ़ाइलों को इम्पोर्ट करते समय, आपको फ़ाइलों को सीधे ट्रांसलेशन की जरूरत नहीं है।

सस में एक मैकनीज़ है: अगर आप फ़ाइल नाम को नीचे से शुरू करते हैं, तो सस इसे ट्रांसलेट नहीं करेगा।इस तरह के नामित फ़ाइलों को सस में partials कहा जाता है।

इसलिए, पार्टियल सस सस्क्रिप्ट फ़ाइलों को पहले लिंक के साथ नामित किया जाता है:

सस पार्टियल गणितीय व्याकरण:

_filename;

नीचे दिए गए उदाहरण "_colors.scss" नामक पार्टियल सस सस्क्रिप्ट फ़ाइल को दिखाता है।(यह फ़ाइल सीधे "colors.css" में नहीं ट्रांसलेट की जाएगी):

इनस्टैंस

"_colors.scss":

$मायपिंक: #EE82EE;
$मायब्लू: #4169E1;
$मायग्रीन: #8FBC8F;

अब, अगर आप इस पार्टियल फ़ाइल को इम्पोर्ट करते हैं, तो नीचे लिंक को छोड़ दें।सस की समझ है कि यह फ़ाइल "_colors.scss" को इम्पोर्ट करना चाहिए:

इनस्टैंस

@import "colors";
बॉडी {
  फ़ॉन्ट-फ़ैमिली: हेलवेटिका, सैन्स-सरिफ़;
  फ़ॉन्ट-साइज़: 18पिक्सल;
  रंग: $मायब्लू;
}