Sass में बड़े CSS projects को manage करना आसान बनाने के लिए @import और Partials का उपयोग किया जाता है। जब CSS file बहुत बड़ी हो जाती है, तो उसे समझना, maintain करना और update करना मुश्किल हो जाता है। Sass इस problem को solve करता है file-based structure के through।
इस chapter में हम Sass @import और Partials को बिल्कुल beginner-level पर, step-by-step और बहुत simple भाषा में समझेंगे।
Partials क्या होते हैं
Partials Sass की छोटी files होती हैं, जिनमें CSS code का एक specific हिस्सा लिखा जाता है। इन files को directly CSS में compile नहीं किया जाता, बल्कि main Sass file में import किया जाता है।
Partial file का main purpose code को छोटे-छोटे logical parts में divide करना होता है।
Partial File की पहचान
Sass partial file का नाम underscore _ से शुरू होता है।
Example:
_variables.scss
_buttons.scss
_header.scss
यह underscore Sass को बताता है कि यह file एक partial है और इसे अलग से CSS में compile नहीं करना है।
Partials क्यों जरूरी होते हैं
Partials use करने के फायदे:
- Code organized रहता है
- Large project manage करना आसान होता है
- Reusable styles बनते हैं
- Team collaboration आसान होती है
Beginner users के लिए यह structure CSS को समझने में बहुत helpful होता है।
Sass @import क्या होता है
Sass में @import directive का उपयोग partial files को main Sass file में include करने के लिए किया जाता है।
यह Sass का feature है, न कि CSS का normal @import।
Sass का @import compile time पर काम करता है, जिससे final CSS file में सिर्फ एक combined output बनता है।
Sass @import Syntax
@import "filename";
यह syntax Sass compiler को बताता है कि दिए गए filename की Sass file को यहां include किया जाए।
Partial file को import करते समय:
- Underscore
_नहीं लिखा जाता - File extension
.scssभी नहीं लिखा जाता
Simple Partial और @import Example
Step 1: Partial File बनाना
// _colors.scss
$primary-color: blue;
$secondary-color: green;
यह file colors related variables store करती है।
इस file का use इसलिए किया गया है ताकि colors centralized हो जाएं।
Step 2: Main Sass File में Import करना
// style.scss
@import "colors";
body {
color: $primary-color;
}
यह code _colors.scss file को style.scss में include करता है।
अब style.scss में $primary-color variable available हो जाता है।
CSS Output
body {
color: blue;
}
यह output दिखाता है कि Sass ने imported file को merge करके final CSS generate कर दी।
Multiple Partials Import करना
एक project में multiple partials हो सकते हैं।
Example:
@import "variables";
@import "header";
@import "buttons";
@import "footer";
यह code अलग-अलग sections की Sass files को main file में include करता है।
इसका फायदा यह है कि हर section की styling अलग file में रहती है लेकिन final CSS एक ही file में बनती है।
Layout-based Partials Example
File Structure
scss/
_variables.scss
_layout.scss
_components.scss
style.scss
_layout.scss
.container {
width: 1200px;
margin: 0 auto;
}
यह file layout related styles रखती है।
_components.scss
.button {
padding: 10px 20px;
}
यह file reusable components की styling रखती है।
style.scss
@import "variables";
@import "layout";
@import "components";
यह main file सभी partials को combine करती है।
CSS output में यह सभी styles एक साथ merge हो जाते हैं।
@import का Order क्यों Important है
Sass में @import का order बहुत important होता है।
Example:
@import "variables";
@import "buttons";
यह order इसलिए जरूरी है क्योंकि buttons file variables को use कर सकती है।
अगर order गलत होगा, तो Sass error देगा कि variable defined नहीं है।
Partials और Variables का Connection
Variables को हमेशा पहले import करना best practice है।
@import "variables";
@import "base";
@import "components";
यह structure ensure करता है कि variables हर file में available हों।
Sass @import और CSS @import में Difference
Sass @import:
- Compile time पर work करता है
- Multiple files को एक CSS file में merge करता है
- Performance friendly होता है
CSS @import:
- Browser runtime पर load होता है
- Multiple HTTP requests बनाता है
- Performance slow कर सकता है
इसलिए Sass @import development के लिए ज्यादा better होता है।
Partials का Practical Benefit
Partials और @import का सही use करने से:
- Project scalable बनता है
- Code clean और readable रहता है
- Debugging आसान होती है
- Future changes safe होते हैं
यह Sass का एक core concept है और real-world projects में almost हर जगह use किया जाता है।
Sass @import और Partials CSS development को professional, structured और maintainable बना देते हैं।