sass
भाग्यांक और आयात
खोज…
आयात कर रहा है
@import का उपयोग करने से आप अपनी फ़ाइलों को कई छोटी फ़ाइलों में विभाजित कर सकते हैं। यह समझ में आता है, क्योंकि आप अपने स्टाइलशीट के लिए बेहतर संरचना रखने में सक्षम हैं और बहुत बड़ी फ़ाइलों से बचते हैं।
उदाहरण
मान लीजिए कि आपके पास कुछ फाइलें हैं।
- application.scss
- header.scss
- content
|-- article.scss
'-- list.scss
- footer.scss
आपका मुख्य स्टाइलशीट application.scss सभी फाइलों को आयात कर सकता है और साथ ही अपनी खुद की शैलियों को परिभाषित कर सकता है।
// application.scss
// Import files:
@import 'header.scss';
@import 'content/article.scss';
@import 'content/list.scss';
@import 'footer.scss';
// other styles in application.scss
body {
margin: 0;
}
ध्यान दें कि आप .scss एक्सटेंशन को भी छोड़ सकते हैं ताकि आप @import 'header'; लिख @import 'header'; @import 'header.scss' बजाय @import 'header.scss' ।
यह आपके द्वारा क्लाइंट (ब्राउज़र) की सेवा की गई संकलित फ़ाइल में शामिल सभी आयातित .scss को application.scss ओर ले जाता है। इस मामले में अपने संकलित फ़ाइल होगा application.css जो आप अपने html में शामिल हैं।
<html>
<head>
<link rel="stylesheet" type="text/css" href="/application.css?v=18c9ed25ea60">
</head>
<body>
...
</body>
</html>
यद्यपि आप कई फ़ाइलों के साथ काम कर रहे हैं, आप केवल एक फ़ाइल की सेवा करते हैं, कई अनुरोधों (प्रत्येक फ़ाइल के लिए एक) की आवश्यकता को समाप्त करते हैं और अपने आगंतुकों के लिए लोड समय को तेज करते हैं।
मुख्य लाभ
- फ़ोल्डर और कई फ़ाइलों का उपयोग करके विकास के लिए बेहतर संरचना
- ग्राहक को केवल एक फ़ाइल परोसना (ब्राउज़र)
partials
आप आंशिक फ़ाइलें बना सकते हैं जिनमें आपकी स्टाइलशीट के छोटे स्निपेट होते हैं। इससे आप अपने CSS को modularize कर सकते हैं और अपने स्टाइलशीट के बेहतर ढांचे की अनुमति दे सकते हैं। एक आंशिक एक Sass फ़ाइल है जिसका नाम एक प्रमुख अंडरस्कोर है, जिसका अर्थ है: _partial.scss । अंडरस्कोर सेस को पता चलता है कि विशिष्ट फ़ाइल एक आंशिक है और यह CSS फ़ाइल में उत्पन्न नहीं होगी।
Sass partials का उपयोग @import निर्देश के साथ किया @import । @import का उपयोग करते @import , आप अग्रणी अंडरस्कोर को छोड़ सकते हैं।
उदाहरण
मान लीजिए कि आपके पास इस तरह के विभाजन के साथ एक फ़ाइल संरचना है
- main.scss
- _variables.scss
- content
|-- _buttons.scss
'-- _otherelements.scss
आप अपने main.scss फ़ाइल में उन विभाजनों को इस प्रकार शामिल कर सकते हैं (प्रमुख अंडरस्कोर और फ़ाइल एक्सटेंशन इस उदाहरण में छोड़ दिए गए हैं:
// main.scss - Imports:
@import 'variables';
@import 'content/buttons';
@import 'content/otherelements';